python使用七牛云存储-button

七牛云存储-用前端button上传到七牛

在这里插入图片描述

引入七牛的步足

安装python的sdk
```
pip install qiniu
```

后端代码

@app.route("/uptoken/")
def uptoken():
    access_key = \'你的AccessKey\'
    secret_key = \'你的SecretKey\'

    # 创建qiniu对象
    q = qiniu.Auth(access_key, secret_key)

    # 储存空间的名称
    bucket = \'zlbbs\'

    # 获取token 参数存储空间的名字
    token = q.upload_token(bucket)
    return jsonify({\'uptoken\': token})

在前端添加js的sdk: 七牛为JavaScript提供了一个专门用来上传文件的接口.把一下文件音带html代码中:

<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>

在前端添加zlqiniu.js文件: 这个文件是封装了七牛的初始化和配置相关的. 使用这个文件可以写更少的代码来使用七牛
```
<script src="{{ url_for(\'static\',filename=\'zlqiniu.js\') }}"></script>
```

初始化七牛: 使用一下代码初始化七牛, 配置一些参数信息:

window.onload = function () {
    zlqiniu.setUp({
      \'browse_btn\': \'upload-btn\',
      \'uptoken_url\': \'/uptoken/\',
      \'success\': function (up,file,info) {
        var url = file.name;
        console.log(url);
      }
    });
}

解释以上代码:

browse_btn: 这个是用来绑定按钮的id的. 以后点击这个按钮就可以上传文件.
uptoken_url: 这个是后台写好的获取uptoken的接口
success: 这个是文件上传成功后执行的回调.\

实践

后端代码

from flask import Flask, jsonify, render_template
import qiniu

app = Flask(__name__)


@app.route("/")
def index():
    return render_template("index.html")


@app.route("/uptoken/")
def uptoken():
    access_key = \'******************************************\'
    secret_key = \'******************************************\'

    # 创建qiniu对象
    q = qiniu.Auth(access_key, secret_key)

    # 储存空间的名称
    bucket = \'zlbbs\'

    # 参数存储空间的名字
    token = q.upload_token(bucket)
    return jsonify({\'uptoken\': token})


if __name__ == "__main__":
    app.run(debug=True)

zlqiniu.js


\'use strict\';

var zlqiniu = {
	\'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;
	}
};

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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>
    <script src="{{ url_for(\'static\',filename=\'zlqiniu.js\') }}"></script>
    <script>
        window.onload = function () {
            zlqiniu.setUp({
                // 这里用你绑定的域名, 但是我这里用的测试域名
                \'domain\': \'http://pw7ro1ig9.bkt.clouddn.com/\',
                // 按钮id
                \'browse_btn\': \'upload-btn\',
                // 访问后端的路径
                \'uptoken_url\': \'/uptoken/\',
                // 成功后的回调
                \'success\': function (up,file,info) {
                    // file.name是图片的链接
                    var image_url = file.name;
                    var imageInput = document.getElementById("image-input");
                    // 把图片的url赋值给input的value
                    imageInput.value = image_url;

                    var img = document.getElementById("img");
                    // 把图片的链接赋值给img的src
                    img.setAttribute("src", image_url);
                }
            });
        }
    </script>
</head>
<body>
    <button id="upload-btn">上传文件</button>
    <input type="text" id="image-input">
    <img src="" alt="" id="img">
</body>
</html>

posted on 2019-08-14 16:11 gmlgxx 阅读(34) 评论(0) 编辑收藏举报