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

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
<
  • 2
    点赞
  • 27
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
在前端Vue项目中,使用`el-upload`组件可以实现图片上传功能。以下是一个简单的实现步骤: 1. 在Vue组件中引入`el-upload`组件: ``` <template> <el-upload class="upload-demo" action="/api/upload" :on-success="handleSuccess" :file-list="fileList" :limit="3" :multiple="true" :show-file-list="false" :auto-upload="false"> <el-button size="small" type="primary">点击上传</el-button> <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过3个文件</div> </el-upload> </template> ``` 在上述代码中,`action`属性指定了上传文件的后端接口地址,`:on-success`属性指定了上传成功后的回调函数,`:file-list`属性指定了上传文件列表,`:limit`属性指定了上传文件的数量限制,`:multiple`属性指定了是否支持多选,`:show-file-list`属性指定了是否显示已上传文件列表,`:auto-upload`属性指定了是否自动上传。 2. 实现上传文件的回调函数: ``` methods: { handleSuccess(res, file) { console.log(res); // 后端返回的上传结果 console.log(file); // 上传的文件对象 // 将上传成功的文件添加到文件列表中 this.fileList.push({ name: file.name, url: res.data.url }); } } ``` 在上述代码中,`handleSuccess`函数接收两个参数:`res`表示后端返回的上传结果,`file`表示上传的文件对象。在函数中,我们将上传成功的文件添加到文件列表中。 3. 后端接口实现: 在后端Flask应用中,可以使用`Flask-Uploads`等第三方库来实现文件上传功能。以下是一个简单的实现代码: ``` from flask import Flask, request, jsonify from flask_uploads import UploadSet, IMAGES, configure_uploads app = Flask(__name__) # 配置文件上传 app.config['UPLOADED_PHOTOS_DEST'] = 'uploads/images' photos = UploadSet('photos', IMAGES) configure_uploads(app, photos) @app.route('/api/upload', methods=['POST']) def upload(): file = request.files['file'] if file: filename = photos.save(file) url = photos.url(filename) return jsonify({'code': 0, 'msg': '上传成功', 'data': {'url': url}}) else: return jsonify({'code': -1, 'msg': '上传失败'}) ``` 在上述代码中,`UPLOADED_PHOTOS_DEST`配置项指定了文件上传后的保存路径,`photos`对象表示上传文件的集合,`upload`函数实现了上传文件的功能。在函数中,我们首先获取上传的文件对象,然后使用`photos.save`将文件保存到指定路径,并使用`photos.url`获取文件的访问URL,最后返回上传结果。 以上就是使用`el-upload`组件实现图片上传功能的简单实现步骤。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值