Flask實戰第55天：cms輪播圖上傳到七牛功能完成

 

登陸七牛雲，進入「對象存儲」， 新建存儲空間(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>