7

使用异步非阻塞框架Tornado配合七牛云存储Api来异步切分上传文件

 2 years ago
source link: https://v3u.cn/a_id_123
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

使用异步非阻塞框架Tornado配合七牛云存储Api来异步切分上传文件

首页 - Python/2019-12-15
使用异步非阻塞框架Tornado配合七牛云存储Api来异步切分上传文件

    之前写了几篇关于FastDfs分布式存储的文章:python3.7.3操作FastDfs来进行文件操作,其实市面上关于云存储的第三方服务比比皆是，最著名的无疑就是七牛云存储，本次我们将演示用tornado配合七牛云来进行文件的云存储操作。

    在做七牛云的文件上传时，很多人有一个误区，就是以为是前端先上传到后台服务器，然后后台服务器再将文件上传到七牛云，这个逻辑本身没有问题，但是会遇到一个问题，如果是后台对接七牛，出一个接口，前端调用接口，先将图片传到后台，然后后台再上传七牛云，用的过程中发现，文件小的情况下还好，文件一旦到了几十兆甚至几百兆的时候就很慢，前端上传图片到后台需要一定时间，后端上传到七牛又需要一段时间，很是麻烦，所以逻辑应该是前端直接上传七牛，而后台只承担生成token和存储七牛云返回的hash的任务。

    首先，使用tornado写一个实时生成token的接口，进入你的七牛云账号，打开秘钥页，记录下你的ak和sk

    

20191215131202_22383.png

    然后打开云存储空间，记录一下你云存储空间的名称

    

20191215131239_52781.png

    此时，用tornado写一个接口，用来返回七牛云的上传token，写之前先安装依赖 pip install qiniu 

#七牛云token
from qiniu import Auth
class QiNiuHandler(BaseHandler):
    async def get(self):
        q = Auth('E2IZM3koC1GR1DUqJHactmixzdyZZhx0edBKqDsk','GDnMkvRoE_kFhCSuvdqQj0VcNsRDOHzYJJ_bVd0_')
        token = q.upload_token('redinnovation')
        print(token)

        self.write(json.dumps({'uptoken':token},ensure_ascii=False))

     写好后，访问tornado服务，确保每一次都会生成新的token,访问http://localhost:8000/uptoken

    

20191215131524_73508.png

    此时，后台接口已经写好，制作一个demo.html，用来写前端操作 

<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>js上传文件到七牛</title>
    <style>
        #container{
            width:200px;
            height:200px;
            border:1px solid #9d9d9d;
            border-radius: 6px;
            margin:50px auto;
            position: relative;
            overflow: hidden;
        }
        .upload-progress{
            width:100%;
            height:100%;
            position: absolute;
            top:0;
            left:0;
            background: rgba(0,0,0,0.5);
            z-index: 5;
            color:#fff;
            line-height: 200px;
            text-align: center;
            display: none;
        }
        #uploadImage{
            width:100%;
            height:100%;
            position: absolute;
            top:0;
            left:0;
            z-index: 2;
            text-align: center;
            line-height: 200px;
            cursor: pointer;
        }
        #container img{
            width:100%;
            position: absolute;
            top:0;
            left:0;
            z-index: 1;
        }
    </style>
</head>
<body>
<div id="container">
    <div id="uploadImage">选择文件</div>
    <div class="upload-progress"></div>
</div>

<script src="./moxie.js"></script>
<script src="./plupload.full.min.js"></script>
<script src="./qiniu.min.js"></script>
<script src="./jquery-1.12.1.min.js"></script>
<script>
    var uploader = Qiniu.uploader({
        disable_statistics_report: false,                                   // 禁止自动发送上传统计信息到七牛，默认允许发送
        runtimes: 'html5,flash,html4',                                      // 上传模式，依次退化
        browse_button: 'uploadImage',                                       // 上传选择的点选按钮，必需
        container: 'container',                                             // 上传区域DOM ID，默认是browser_button的父元素
        max_file_size: '500mb',                                             // 最大文件体积限制
        flash_swf_url: 'Moxie.swf',                                         // 引入flash，相对路径
        dragdrop: false,                                                    // 关闭可拖曳上传
        chunk_size: '4mb',                                                  // 分块上传时，每块的体积
        multi_selection: !(moxie.core.utils.Env.OS.toLowerCase() === "ios"),
        uptoken_url: 'http://localhost:8000/uptoken',                                                 // 在初始化时，uptoken，uptoken_url，uptoken_func三个参数中必须有一个被设置,uptoken是上传凭证，由其他程序生成;uptoken_url是提供了获取上传凭证的地址，如果需要定制获取uptoken的过程则可以设置uptoken_func;其优先级为uptoken > uptoken_url > uptoken_func
        //uptoken:'q06bq54Ps5JLfZyP8Ax-qvByMBdu8AoIVJpMco2m:kyTiuN6GBUpfNt1nJIA7C8CCStY=:eyJzY29wZSI6IjEzMTIzMTIzMTIzIiwiZGVhZGxpbmUiOjE1NzY0MTM3MTB9',
        domain: 'redinnovation.s3-cn-north-1.qiniucs.com',                                                      // bucket域名，下载资源时用到，必需
        get_new_uptoken: false,                                              // 设置上传文件的时候是否每次都重新获取新的uptoken
        auto_start: true,                                                   // 选择文件后自动上传，若关闭需要自己绑定事件触发上传
        max_retries: 3,                                                     // 上传失败最大重试次数
        save_key: true,
        resize: {                                                           // 想限制上传图片尺寸，直接用resize这个属性
            width: 300,
            height: 300
        },
        init: {
            'FilesAdded': function(up, files) {                             // 文件添加进队列后，处理相关的事情
                plupload.each(files, function(file) {
                    console.log(file)
                });
            },
            'BeforeUpload': function(up, file) {                            // 每个文件上传前，处理相关的事情
                console.log("开始上传之前");
                $(".upload-progress").show();
            },
            'UploadProgress': function(up, file) {                          // 每个文件上传时，处理相关的事情
                console.log("上传中");
                $(".upload-progress").html("上传进度:"+file.percent + "%");
            },
            'FileUploaded': function(up, file, info) {                       // 每个文件上传成功后，处理相关的事情
                console.log("上传成功");
                console.log(info);
                //$(".upload-progress").hide();
                //var img = new Image();                                      //创建一个Image对象，实现图片的预下载
                //img.src = "http://qiniu.com/"+res.key;
                //$("#container").append(img);
            },
            'Error': function(up, err, errTip) {
                console.log("上传出错")
            },
            'UploadComplete': function() {
                //队列文件处理完毕后，处理相关的事情
            }
        }
    });
</script>
</body>
</html>

     上传成功后，记得对应一下hash值，看是否一致

    

20191215131934_37589.png
20191215131943_41701.png

    可以看到，完全一致，这也是七牛云的优势之一，利用文件hash来进行重复文件的排重，节约存储空间

    总体上没有任何难度，值得一提的是，如果七牛云接口报400

    

20191215132237_16896.png

    说明你的上传区域没有设置对，存储空间在华北就是up-z1.qiniup.com，如果是华南的话就是up-z2.qiniup.com,只要修改qiniu.min.js中对应的网址即可。

    最后奉上七牛云上传文件demo的项目地址：https://gitee.com/QiHanXiBei/qiniu_upload_demo


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK