1.flask-uploads
flask-uploads扩展库极大的优化了文件上传的操作,使用非常方便,不需要自己再写原生的上传文件的代码。
下面我们通过上传图片文件,并将图片文件展示到页面上来了解flask-uploads这个扩展库的作用
2.通过flask-uploads上传图片
(1)准备工作,安装flask-uploads
pip install flask-uploads
(2)导入本次需要用到的类库
from flask import Flask,render_template
from flask_uploads import UploadSet,IMAGES,configure_uploads
from flask_bootstrap import Bootstrap
from flask_wtf import FlaskForm
from flask_wtf.file import FileField,FileAllowed,FileRequired
from wtforms import SubmitField
from flask_script import Manager
import os
这里我使用表单来提交上传的图片,因此导入flask-wtf类库(如果没有需要安装一下flask-wtf),并使用flask-bootstrap快速渲染表单
(2)配置上传文件的保存位置,上传文件的大小限制,以及秘钥(随便设置一串字符),这是上传文件必须要设置的,不然页面会报异常
flask = Flask(__name__)
manager = Manager(flask)
bootstrap = Bootstrap(flask)
# 配置上传文件的保存路径
flask.config['UPLOADED_IMAGES_DEST'] = os.path.join(os.getcwd(),'static/upload/image')
# 设置秘钥
flask.config['SECRET_KEY'] = 'SDOIFBVSIOJBVOASJDV'
# 设置文件大小限制(8M)
flask.config['MAX_CONTENT_LENGTH'] = 1024 * 1024 * 8
# 创建文件上传对象(对象名,对象类型)
images = UploadSet('images',IMAGES)
# 配置对象(创建的app名,文件上传的对象)
configure_uploads(flask,images)
这里需要注意的是配置上传文件的保存路径需要配置这个参数'UPLOADED_IMAGES_DEST'这个参数不是固定的,根据你创建的文件上传对象来确定,因为我创建的文件上传对象名字为images所以'UPLOADED_IMAGES_DEST'这个参数中间就是images的大写,如果你创建了一个名为photos的文件上传对象,那么参数就是'UPLOADED_PHOTOS_DEST',这样就能够明白了吧。
(3)创建一个用来文件上传的表单
# 创建文件上传的表单
class UploadForm(FlaskForm):
images = FileField('头像选择',validators=[FileRequired(message='请选择文件'),FileAllowed(images)])
submit = SubmitField('上传')
创建文件上传的表单时,字段为文件字段,而且这里我添加了两个验证器,FileRequired()用来做必须选择文件的设置,FileAllowed(文件上传对象名),这个验证器是用来限制必须上传图片文件。
(4)构建视图函数,接收文件,并为文件取一个32位的随机文件名,防止文件名冲突
# 生成随机32位的字符串
def random_str(length=32):
import random
base_str = 'qwertyuioplkjhgfdsazcxvbnm0123456789'
return ''.join(random.choice(base_str) for i in range(length))
构建视图函数接收文件并保存
@flask.route('/upload/',methods=['GET','POST'])
def upload():
img_url = None
# 创建一个表单对象
form = UploadForm()
if form.validate_on_submit():
# 获取上传文件
image = form.images.data
if image:
# 获取文件的后缀
suffix = os.path.splitext(image.filename)[1]
# 生成随机的文件名
filename = random_str() + suffix
# 保存文件
images.save(image,name=filename)
# 获取文件的地址
img_url = images.url(filename)
return render_template('upload.html',form=form,img_url=img_url)
这里需要注意的是保存文件需要传入你从表单中获取的数据以及你要保存文件的文件名,img_url这个参数是用来传到前端页面获得图片文件的地址,并将上传的图片文件展示在页面上。
(5)构造用来展示的前端页面
{% extends 'bootstrap/base.html' %}
{% from 'bootstrap/wtf.html' import quick_form %}
{% block title %}
文件上传
{% endblock %}
{% block content %}
<div class="container">
{{ quick_form(form) }}
{% if img_url %}
<img src="{{ img_url }}">
{% endif %}
</div>
{% endblock %}
我在这里使用了bootstrap快速渲染表单的方法,方便快捷,虽然不美观,但是可以达到效果。到这里你就可以上传一张图片,并可以在页面上看到自己上传的图片了。
注意:这里的代码顺序都是正常的顺序,按着这个顺序来敲是不会出问题的,在使用flask-uploads上传图片的时候,有几点需要注意,一是需要各种配置及对象创建,二就是注意对象创建的先后顺序,如果顺序错了是会报错的。