登录七牛云，进入“对象存储”， 新建存储空间(Bucket),
我创建的空间命名为flask-bbs
创建完Bucket，七牛会给我们提供一个测试域名，生产环境中，我们需要绑定自己的域名
在个人面板中进去密钥管理，获取AccessKey/SecretKey
安装七牛python SKD
pip install qiniu
后端需要根据认证信息传递token给前端，编辑common.view.py
from flask import jsonify
import qiniu
... @bp.route('/uptoken/')
def uptoken():
access_key = '8A9ledAc13rRahJb74VuMUTCMvEIORp36XP5-_Zr'
secret_key = 'bDYTou2LULvSbj8lb-ouUvYXrHOSndKMa2oPmhJE'
q = qiniu.Auth(access_key, secret_key) bucket = 'flask-bbs'
token = q.upload_token(bucket)
return jsonify({'uptoken': token})
前端需要用到js版的jdk,编辑cms_banners.html,引入以下3个js
<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>
在static/common/js下新建bbsqiniu.js，对jdk 进行一层封装，使用起来更方便
'use strict';
var bbsqiniu = {
'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;
}
};
bbsqiniu.js
cms_banners.html中此js
<script src="{{ url_for('static', filename='common/js/bbsqiniu.js') }}"></script>
然后编辑banners.js, 对"添加图片" 这个按钮进行操作
$(function () {
bbsqiniu.setUp({
'domain': 'http://sei5g2ne0.bkt.clouddn.com/', //七牛的域名
'browse_btn': 'upload-btn', //按钮的id
'uptoken_url': '/c/uptoken/', //后端的url获取token
'success': function (up,file,info) {
var imageInput = $("input[name='image_url']");
imageInput.val(file.name); //把图片的完整地址填入到表单中
}
});
});
现在我们添加四张轮播图
这样利用七牛存储图片就完成了
编辑front.views.py
from apps.models import BannerModel
... @bp.route('/')
def index():
banners = BannerModel.query.order_by(BannerModel.priority.desc()).all()
context = {
'banners': banners
}
return render_template('front/front_index.html', **context)
编辑front_index.html
<!-- 轮播图 -->
<div class="carousel-inner" role="listbox"> {% for banner in banners %}
{% if loop.first %}
<div class="item active">
{% else %}
<div class="item">
{% endif %}
<a href="{{ banner.link_url }}">
<img src="{{ banner.image_url }}" alt="...">
</a>
</div>
{% endfor %}
</div>