现在开发过程中往往上传图片视频都会托管到第三方平台,不会直接保存到自己的服务器上,主要是出于服务器维护成本及安全性考虑,现在介绍
django-web
开发使用七牛云上传文件七牛官方网站
一、关于七牛上传文件的思路
- 1、客户端上传文件到七牛前,需要先从七牛服务器端获取到
token
(这个就是要后端处理,现在我们用django
获取) - 2、客户端拿到了
token
,把token
和文件一起上传到七牛云服务器上(以下主要是javascript
实现) - 3、七牛云服务器拿到
token
和文件后会校验当前的token
是否有效,如果有效就会返回图片名到客户端
二、七牛云的基本配置及使用
- 1、注册用户并认证
- 2、创建空间传送门
3、安装七牛包官方文档
pip install qiniu
4、书写获取
token
的视图类from qiniu import Auth,put_file import qiniu.config # 定义获取七牛服务器上的tocken @login_required @require_http_methods(['GET']) def get_token(request): # 1. 先要设置AccessKey和SecretKey access_key = "vsGPC........BeZk2_qIbkEgK" secret_key = "7IjRRk.......VpR2LXq60FNae4HgwY" # 2. 授权 q = Auth(access_key, secret_key) # 3. 设置七牛空间(自己刚刚创建的) bucket_name = 'xxxx' # 4. 生成token token = q.upload_token(bucket_name) # 5. 返回token,key必须为uptoken return JsonResponse({'uptoken': token})
以下代码别盲目复制,关于
access_key
和secret_key
请在这里查看自己的- 5、配置自己的视图
url
- 6、使用
postman
或者基于REST
的web
服务客户端测试接口 7、客户端
javascript
处理参考文档页面引入几个
js
文件<script src="https://cdn.staticfile.org/Plupload/2.1.1/moxie.js"></script> <script src="https://cdn.staticfile.org/Plupload/2.1.1/plupload.dev.js"></script> <script src="https://cdn.staticfile.org/qiniu-js-sdk/1.0.14-beta/qiniu.js"></script>
复制官方的代码过来封装一个及时函数
/*---------关于七牛上传代码start-----------*/ (function () { // 需要拷贝自己七牛上的地址(不知道怎么拷贝,先手动上传一个,复制地址就好) var domain = 'http://ozrm0rti1.bkt.clouddn.com/'; var uploader = Qiniu.uploader({ runtimes: 'html5,flash,html4', //上传模式,依次退化 browse_button: 'pickfiles', //上传选择的点选按钮id,必须 container: 'container', //上传区域DOM的ID,默认是browse_button的父元素 drop_element: 'container', //拖曳上传区域元素的ID,拖曳文件或文件夹后可触发上传 max_file_size: '500mb', //文件最大允许的尺寸 dragdrop: true, //是否开启拖拽上传 chunk_size: '4mb', //分块上传时,每片的大小 uptoken_url: '/xxxx/', //ajax请求token的url(书写上面第四点的地址) domain: domain, //图片下载时候的域名 get_new_uptoken: false, //是否每次上传文件都要从业务服务器获取token auto_start: true, //是否自动上传 log_level: 5, //log级别 init: { 'FilesAdded': function (up, files) { // 文件添加进队列后,处理相关的事情 console.log('file added'); }, 'BeforeUpload': function (up, file) { // 每个文件上传前,处理相关的事情 console.log('before upload'); }, 'UploadProgress': function () { // 每个文件上传时,处理相关的事情 console.log('upload progress'); }, 'FileUploaded': function (up, file, info) { // 每个文件上传成功后,处理相关的事情 // 刚刚上传的文件名称domain + file.name console.log('file uploaded-----------'); // 把上传的文件地址保存到本地的隐藏域中 $('#imgUrl').val(domain + file.name); }, 'Error': function (up, err, errTip) { console.log('error:' + err); }, 'UploadComplete': function () { //队列文件处理完毕后,处理相关的事情 }, 'Key': function (up, file) { // 若想在前端对每个文件的key进行个性化处理,可以配置该函数 // 该配置必须要在unique_names: false,save_key: false时才生效 var key = +new Date(); // 对上传的文件重命名 // do something with key here return key } } }); })() /*---------关于七牛上传代码end-----------*/