七牛云图片上传
可查看七牛云上传图片的SDK
from flask import Flask, render_template, request, jsonify
from qiniu import Auth, put_data
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
# 原始上传文件的示例
@app.route('/upload_raw/', methods=['GET', 'POST'])
def upload_raw():
file_obj = request.files.get('f1')
file_obj.save('a.png')
return 'success'
# 七牛云上传
@app.route('/upload_qiniu/', methods=['GET', 'POST'])
def upload_qiniu():
file = request.files.get('f2')
# 七牛云的密钥管理可以查看
access_key = '******'
secret_key = '******'
q = Auth(access_key=access_key, secret_key=secret_key)
# elm-flask创建的存储空间名
token = q.upload_token('elm-flask')
ret, info = put_data(up_token=token, key=None, data=file.read())
print(ret.get('key'))
return "success"
# 只提供token接口
@app.route('/uptoken/')
def uptoken():
# 七牛云的密钥管理可以查看
access_key = '*****'
secret_key = '*****'
q = Auth(access_key=access_key, secret_key=secret_key)
# elm-flask创建的存储空间名
token = q.upload_token('elm-flask')
return jsonify({"uptoken": token})
if __name__ == '__main__':
app.run(debug=True)
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>上传文件示例</title>
</head>
<body>
{# 普通上传 #}
<form action="/upload_raw/" method="post" enctype="multipart/form-data">
<label for="fid"><input type="file" id="fid" name="f1"></label>
<input type="submit" value="上传">
</form>
<br>
{# 七牛云上传 #}
<form action="/upload_qiniu/" method="post" enctype="multipart/form-data">
<label for="fid2"><input type="file" id="fid2" name="f2"></label>
<input type="submit" value="上传">
</form>
<br>
<br>
{# 七牛云使用前端上传 #}
<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="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="{{ url_for('static', filename="itqiniu.js") }}"></script>
<button id="upload-btn">上传文件</button>
<input type="text" id="image-input">
<img src="" alt="" id="img" width="50px">
<script>
window.onload = function () {
itqiniu.setUp({
'domain': 'http://pekvn6or3.bkt.clouddn.com/',
'browse_btn': 'upload-btn',
'uptoken_url': '/uptoken/',
'success': function (up, file, info) {
var image_url = file.name;
var image_input = document.getElementById('image-input');
image_input.value = image_url;
var img = document.getElementById('img');
img.setAttribute('src', image_url);
}
});
}
</script>
</body>
</html>
// js上传七牛云
window.onload = function () {
itqiniu.setUp({
// domain 为七牛云创建空间所生成的域名
'domain': 'http://pk7rw1paf.bkt.clouddn.com/',
// browse_btn 为html的button的id值
'browse_btn': 'upload-btn',
'uptoken_url': '/uptoken/',
'success': function (up, file, info) {
let image_url = file.name;
let image_input = document.getElementById('image-input');
image_input.value = image_url;
// 将上传的图片回显到页面上
let img = document.getElementById('image-show');
img.setAttribute('src', image_url);
}
});
};
var itqiniu = {
'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: false,
save_key: true,
multi_selection: false,
filters: {
mime_types :[
{title:'Image files',extensions: 'jpg,gif,png,jpeg'},
{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'];
var obj = JSON.parse(info);
var domain = up.getOption('domain');
file.name = domain + obj.key;
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;
}
};