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_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-----------*/