Flask实战第55天：cms轮播图上传到七牛功能完成

 

登录七牛云，进入“对象存储”， 新建存储空间(Bucket), 

我创建的空间命名为flask-bbs

创建完Bucket，七牛会给我们提供一个测试域名，生产环境中，我们需要绑定自己的域名

在个人面板中进去密钥管理，获取AccessKey/SecretKey

安装七牛python SKD

pip install qiniu

后端需要根据认证信息传递token给前端，编辑common.view.py

from flask import  jsonify
import qiniu
...

@bp.route('/uptoken/')
def uptoken():
    access_key = '8A9ledAc13rRahJb74VuMUTCMvEIORp36XP5-_Zr'
    secret_key = 'bDYTou2LULvSbj8lb-ouUvYXrHOSndKMa2oPmhJE'
    q = qiniu.Auth(access_key, secret_key)

    bucket = 'flask-bbs'
    token = q.upload_token(bucket)
    return jsonify({'uptoken': token})

前端需要用到js版的jdk,编辑cms_banners.html,引入以下3个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>

在static/common/js下新建bbsqiniu.js，对jdk 进行一层封装，使用起来更方便

'use strict';

var bbsqiniu = {
    'setUp': function(args) {
        var domain = args['domain'];
        var params = {
            browse_button:args['browse_btn'],
            runtimes: 'html5,flash,html4', //上传模式，依次退化
            max_file_size: '500mb', //文件最大允许的尺寸
            dragdrop: false, //是否开启拖拽上传
            chunk_size: '4mb', //分块上传时，每片的大小
            uptoken_url: args['uptoken_url'], //ajax请求token的url
            domain: domain, //图片下载时候的域名
            get_new_uptoken: false, //是否每次上传文件都要从业务服务器获取token
            auto_start: true, //如果设置了true,只要选择了图片,就会自动上传
            unique_names: true,
            multi_selection: false,
            filters: {
                mime_types :[
                    {title:'Image files',extensions: 'jpg,gif,png'},
                    {title:'Video files',extensions: 'flv,mpg,mpeg,avi,wmv,mov,asf,rm,rmvb,mkv,m4v,mp4'}
                ]
            },
            log_level: 5, //log级别
            init: {
                'FileUploaded': function(up,file,info) {
                    if(args['success']){
                        var success = args['success'];
                        file.name = domain + file.target_name;
                        success(up,file,info);
                    }
                },
                'Error': function(up,err,errTip) {
                    if(args['error']){
                        var error = args['error'];
                        error(up,err,errTip);
                    }
                },
                'UploadProgress': function (up,file) {
                    if(args['progress']){
                        args['progress'](up,file);
                    }
                },
                'FilesAdded': function (up,files) {
                    if(args['fileadded']){
                        args['fileadded'](up,files);
                    }
                },
                'UploadComplete': function () {
                    if(args['complete']){
                        args['complete']();
                    }
                }
            }
        };

        // 把args中的参数放到params中去
        for(var key in args){
            params[key] = args[key];
        }
        var uploader = Qiniu.uploader(params);
        return uploader;
    }
};

bbsqiniu.js