python使用七牛云存储-button

只因为你温柔

已于 2022-12-12 18:22:26 修改

阅读量275

点赞数

分类专栏： # 七牛云存储文章标签：静态存储

于 2019-08-14 16:10:30 首次发布

本文链接：https://blog.csdn.net/zsx1314lovezyf/article/details/99579058

版权

七牛云存储专栏收录该内容

1 篇文章 0 订阅

订阅专栏

七牛云存储-用前端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>

只因为你温柔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
python使用七牛云存储-button

七牛云存储-用前端button上传到七牛引入七牛的步足安装python的sdkpip install qiniu后端代码@app.route("/uptoken/")def uptoken(): access_key = '你的AccessKey' secret_key = '你的SecretKey' # 创建qiniu对象 q = ...
复制链接

扫一扫