zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    Poj 2017 Speed Limit(水题)
    Poj 1316 Self Numbers(水题)
    Poj 1017 Packets(贪心策略)
    Poj 1017 Packets(贪心策略)
    Poj 2662,2909 Goldbach's Conjecture (素数判定)
    Poj 2662,2909 Goldbach's Conjecture (素数判定)
    poj 2388 Who's in the Middle(快速排序求中位数)
    poj 2388 Who's in the Middle(快速排序求中位数)
    poj 2000 Gold Coins(水题)
    poj 2000 Gold Coins(水题)
  • 原文地址:https://www.cnblogs.com/sellsa/p/9573700.html
Copyright © 2011-2022 走看看