七牛云存储

介绍：

七牛云存储是一个集图片、视频对象存储为一体的网站。并且他上面集成了cdn加速服务，图片处理（加水印，图片裁剪）等功能，对于一些想要快速开发产品，不想花大量时间来构建自己资源服务器的中小型公司而言，无疑是最好的选择。

准备工作：

1. 到七牛官网：https://www.qiniu.com/。创建账号。然后到个人面板->秘钥管理处获取access_key和secret_key。
2. 创建空间，可以选择华东区，华南区等。

使用：

后端：

1. 下载Python SDK：

通过命令pip install qiniu即可下载七牛的SDK。

2. 创建一个获取token的url：

# views.py
import qiniu

@require_GET
def qntoken(request):
    access_key = '你的access_key'
    secret_key = '你的secret_key'
    q = qiniu.Auth(access_key, secret_key)

    bucket = 'xtspace'
    token = q.upload_token(bucket)
    return restful.result(kwargs={"uptoken":token})

然后在urls.py中做一个url与视图函数的映射。示例代码如下：

from django.urls import path
urlpatterns = [
    path('qntoken/',views.qntoken,name='qntoken')
]

前端：

1. 在模板中引入最新版(2.4.0)的JavaScript SDK：

   <script src="https://unpkg.com/qiniu-js@2.4.0/dist/qiniu.min.js"></script>
   

2. 然后监听一个type=file类型的按钮的change事件，一旦选择了文件，那么就会执行change事件，在change事件的处理函数中，我们就可以获取到当前选中的文件。然后通过七牛的SDK发送给服务器。示例代码如下：

    function News() {
        var self = this;
        self.progressGroup = $("#progress-group");
        self.progressBar = $(".progress-bar");
    }
   
    News.prototype.listenQiniuUploadFileEvent = function () {
        var self = this;
        var thumbnailBtn = $('#thumbnail-btn');
        thumbnailBtn.change(function (event) {
            var file = this.files[0];
            xfzajax.get({
                'url': '/cms/qntoken/',
                'success': function (result) {
                    var token = result['uptoken'];
                    var key = (new Date()).getTime() + '.' + file.name.split('.')[1];
                    var putExtra = {
                        fname: key,
                        params: {},
                        mimeType: ['image/png','video/x-ms-wmv','image/jpeg']
                    };
                    var config = {
                        useCdnDomain: true,
                        retryCount: 6,
                        region: qiniu.region.z2
                    };
                    var observable = qiniu.upload(file, key, token, putExtra,config);
                    observable.subscribe({
                        "next":self.updateUploadProgress,
                        "error":self.uploadErrorEvent,
                        "complete": self.complateUploadEvent
                    });
                    self.progressGroup.show();
                }
            });
        });
    };
   
    News.prototype.updateUploadProgress = function (response) {
        var self = this;
        var total = response.total;
        var percent = total.percent;
        var percentText = percent.toFixed(0) + '%';
        var progressBar = $(".progress-bar");
        progressBar.css({"width":percentText});
        progressBar.text(percentText);
    };
   
    News.prototype.uploadErrorEvent = function (error) {
        window.messageBox.showError(error.message);
    };
   
    News.prototype.complateUploadEvent = function (response) {
        var self = this;
        var filename = response['key'];
        var domain = "http://og209xb9x.bkt.clouddn.com/";
        var thumbnailUrl = domain + filename;
        var thumbnailInput = $("#thumbnail-form");
        thumbnailInput.val(thumbnailUrl);
        var progressGroup = $("#progress-group");
        progressGroup.hide();
    };
   

相关链接：

1. 七牛官网：https://www.qiniu.com/。
2. Python SDK地址：https://developer.qiniu.com/kodo/sdk/1242/python。
3. JavaScript SDK地址：https://developer.qiniu.com/kodo/sdk/1283/javascript。