Flask Web开发入门(十)之图片上传(使用Flask-Upload)

版权声明:未经允许,不得转载 https://blog.csdn.net/kangkanglou/article/details/79036388

Flask Web开发入门(八)之文件上传中,我们探讨了Flask框架下的文件上传,本章我们将使用Flask插件Flask-Uploads示例说明的图片上传与展现如何实现

开始之前,我们先简单看下Flask-Uploads源码实现:

UploadSet

文件上传配置集合,包含三个参数:

  • name:文件上传配置集合的名称,默认files,一般不用修改,只是一个标识,要求数字、字母或两者组合,满足isalnum
  • extensions:上传文件类型,默认DEFAULTS = TEXT + DOCUMENTS + IMAGES + DATA,包含文本、文档、图片、CSV、INI、YML等配置文件
  • default_dest:上传文件的默认存储路径,我们可以通过app.config[‘UPLOADS_DEFAULT_DEST’]来指定

方法configure_uploads

应用配置好之后,调用此方法,扫描上传配置选项并保存到我们的应用中,注册上传模块。

方法resolve_conflict

解决名字重复问题,如果服务器上已经存在指定文件名的文件,那么Flask-Uploads通过此方法解决文件保存时的冲突问题,解决策略:文件名后加_num,num从1开始,之后拿新的名字重新判断是否存在,如果仍旧存在,再次加1,直至不存在为止

方法实现:

name, ext = os.path.splitext(basename)
        count = 0
        while True:
            count = count + 1
            newname = '%s_%d%s' % (name, count, ext)
            if not os.path.exists(os.path.join(target_folder, newname)):
                return newname

方法调用:

        if os.path.exists(os.path.join(target_folder, basename)):
            basename = self.resolve_conflict(target_folder, basename)

示例

简单分析完Flask-Uploads源码实现之后,我们来看下如何通过Flask-Uploads实现图片上传与展现

  • 定义基本配置与应用注册
app.config['UPLOADS_DEFAULT_DEST'] = UPLOAD_PATH
app.config['UPLOADS_DEFAULT_URL'] = 'http://127.0.0.1:9000/'
uploaded_photos = UploadSet()
configure_uploads(app, uploaded_photos)
  • 上传处理逻辑
# http://flask-uploads.readthedocs.io/en/latest/
@app.route('/flask-upload', methods=['POST'])
def flask_upload():
    if request.method == 'POST':
        # check if the post request has the file part
        if 'file' not in request.files:
            logger.debug('No file part')
            return jsonify({'code': -1, 'filename': '', 'msg': 'No file part'})
        file = request.files['file']
        # if user does not select file, browser also submit a empty part without filename
        if file.filename == '':
            logger.debug('No selected file')
            return jsonify({'code': -1, 'filename': '', 'msg': 'No selected file'})
        else:
            try:
                filename = uploaded_photos.save(file)
                logger.debug('%s url is %s' % (filename, uploaded_photos.url(filename)))
                return jsonify({'code': 0, 'filename': filename, 'msg': uploaded_photos.url(filename)})
            except Exception as e:
                logger.debug('upload file exception: %s' % e)
                return jsonify({'code': -1, 'filename': '', 'msg': 'Error occurred'})
    else:
        return jsonify({'code': -1, 'filename': '', 'msg': 'Method not allowed'})

注意:核心方法即:uploaded_photos.save(file)

  • 前台代码
 var photoUpload = upload.render({
            elem: '#btn_photo'
            , url: '/flask-upload'
            , exts: 'jpg|png|jpeg'
            , size: 5120
            , before: function (obj) {
                obj.preview(function (index, file, result) {
                    $('#photo').attr('src', result);
                    $('#photo').css('width', '300');
                    $('#photo').css('height', '300');
                });
            }
            , done: function (res) {
                if (res.code == 0) {
                    layer.msg(res.filename + '上传成功!');
                    var href = '<a href="' + res.msg + '" style="color:blue; text-decoration: solid;">' + res.msg + '</a>'
                    $('#txt_photo').html(href)
                } else {
                    return layer.msg('上传失败');
                }
            }
            , error: function () {
                var photo = $('#txt_photo');
                photo.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                photo.find('#btn_photo').on('click', function () {
                    photoUpload.upload();
                });
            }
        });
  • 实现效果

注意红色框内的文件名,我连续上传了三次,那么第三次文件名后面家了_2

这里写图片描述



源码参考:https://github.com/ypmc/flask-sqlalchemy-web

阅读更多
换一批

没有更多推荐了,返回首页