django-web开发使用七牛云上传图片

现在开发过程中往往上传图片视频都会托管到第三方平台,不会直接保存到自己的服务器上,主要是出于服务器维护成本及安全性考虑,现在介绍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_fileimport 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-----------*/