Flask 实现单个文件上传

Posted by cherich on

category: flask

Tags: flask

最近在使用Flask搭建个人博客系统时,内容编辑页上传文件时遇到"缺少图像源文件地址"问题,经过查询资料打算把Flask文件上传系统学习过程记录下来。

文件上传是个躲不掉的问题,用户头像,文章图片,文件分享等等都需要上传功能。但这里涉及很多内容,上传文件,过滤文件类型,限制大小,上传前的编辑筛选,拖拽上传,进度条,文件命名,文件目录管理,访问速度……

一、使用Flask原生实现文件上传

这是一个图片上传完整的实现Demo,可以复制体验一下,后面会有详解。
# -*- coding: utf-8 -*-
import os
from flask import Flask, request, url_for, send_from_directory
from werkzeug import secure_filename

ALLOWED_EXTENSIONS = set(['png', 'jpg', 'jpeg', 'gif'])

app = Flask(__name__)
app.config['UPLOAD_FOLDER'] = os.getcwd()
app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024

html = '''
    <!DOCTYPE html>
    <title>Upload File</title>
    <h1>图片上传</h1>
    <form method=post enctype=multipart/form-data>
         <input type=file name=file>
         <input type=submit value=上传>
    </form>
    '''

def allowed_file(filename):
    return '.' in filename and \
           filename.rsplit('.', 1)[1] in ALLOWED_EXTENSIONS

@app.route('/uploads/<filename>')
def uploaded_file(filename):
    return send_from_directory(app.config['UPLOAD_FOLDER'],
                               filename)

@app.route('/', methods=['GET', 'POST'])
def upload_file():
    if request.method == 'POST':
        file = request.files['file']
        if file and allowed_file(file.filename):
            filename = secure_filename(file.filename)
            file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
            file_url = url_for('uploaded_file', filename=filename)
            return html + '<br><img src=' + file_url + '>'
    return html

if __name__ == '__main__':
    app.run()

简单来说,只有三个步骤:

1、创建一个上传表单:

<form method="POST" enctype="multipart/form-data">
      <input type="file" name="file">
      <input type="submit" value="Upload">
</form>

2、当按下提交键后,通过request对象上的files获取文件。和以前用request获取表单值一样,使用input字段的name值获取:

file = request.files['file']

3、使用save()方法保存文件,指定保存的地址及文件名:

file.save(path + filename)

当然,除了这些,还有很多东西要考虑。

上传配置

在这里我们设置上传文件夹地址、允许的文件扩展名、限制文件大小:

UPLOAD_FOLDER = '/path/to/the/uploads'
ALLOWED_EXTENSIONS = set(['txt', 'pdf', 'png', 'jpg', 'jpeg', 'gif'])
MAX_CONTENT_LENGTH = 16 * 1024 * 1024  # 16MB

你也可以使用:

app.config['UPLOAD_FOLDER'] = '/path/to/the/uploads'

安全问题

1、导入Werkzeug提供的secure_filename()函数来检查文件名,它会过滤掉危险字符(比如../../../home/username):

filename = secure_filename(file.filename)

要注意的是,secure_filename仅返回ASCII字符。所以, 非ASCII(比如汉字)会被过滤掉,空格会被替换为下划线。你也可以自己处理文件名,或是在使用这个函数前将中文替换为拼音或是英文。具体见后续文章。

2、使用我们在上面配置的扩展名来检查文件类型。

创建一个检查函数:

def allowed_file(filename):
    return '.' in filename and \
           filename.rsplit('.', 1)[1] in ALLOWED_EXTENSIONS

判断上传文件名:

...
if file and allowed_file(file.filename):
...

3、使用上面配置的文件最大长度来检查文件大小(仅需要配置),如果超过限制,会抛出RequestEntityTooLarge异常,进而返回413错误(在开发服务器可能会直接断开连接,属正常现象)。

获取上传后的文件

配置一个函数来获取上传文件的url:

from flask import send_from_directory

@app.route('/uploads/<filename>')
def uploaded_file(filename):
    return send_from_directory(app.config['UPLOAD_FOLDER'],
                               filename)

获取url:

file_url = url_for('uploaded_file', filename=filename)

二、用扩展Flask-Uploads实现上传功能

Flask-Uploads简化了大部分操作。比如在上面的原生上传中,我们需要自己设置一个集合来设置允许哪些类型的文件(ALLOWED_EXTENSIONS),而Flask-Uploads已经把常用的文件类型分好类,你只需要导入相应的集合名称,比如IMAGES、TEXT、AUDIO等等(默认配置为DEFAULTS,包括TEXT + DOCUMENTS + IMAGES + DATA)。除此之外,你还可以配置全部允许(All)、除某些文件类型外全允许(AllExcept())。这些集合也可以组合使用(比如IMAGES+TEXT)。

同样是一个图片上传的完整实现demo,这次要简单的多。
# -*- coding: utf-8 -*-
import os
from flask import Flask, request
from flask_uploads import UploadSet, configure_uploads, IMAGES,\
 patch_request_class

app = Flask(__name__)
app.config['UPLOADED_PHOTOS_DEST'] = os.getcwd()  # 文件储存地址

photos = UploadSet('photos', IMAGES)
configure_uploads(app, photos)
patch_request_class(app)  # 文件大小限制,默认为16MB

html = '''
    <!DOCTYPE html>
    <title>Upload File</title>
    <h1>图片上传</h1>
    <form method=post enctype=multipart/form-data>
         <input type=file name=photo>
         <input type=submit value=上传>
    </form>
    '''


@app.route('/', methods=['GET', 'POST'])
def upload_file():
    if request.method == 'POST' and 'photo' in request.files:
        filename = photos.save(request.files['photo'])
        file_url = photos.url(filename)
        return html + '<br><img src=' + file_url + '>'
    return html


if __name__ == '__main__':
    app.run()

注:视图函数里的两个‘photo’均指的是input字段的name值。

上传配置

因为Flask-Uploads允许你创建不同的set(代表你上传的文件的集合),所以配置时要把下面的FILES替换成你的set名。

比如文件储存地址设置:

UPLOADED_FILES_DEST = '/path/to/the/uploads'

如果你的set叫photos,那么这条设置就改成:

UPLOADED_PHOTOS_DEST = '/path/to/the/uploads'

你也可以设置一个默认的配置:

UPLOADS_DEFAULT_DEST = '/path/to/the/uploads'
安全问题

1、文件类型过滤

创建一个set(通过实例化UploadSet()类实现),然后使用configure_uploads()方法注册并完成相应的配置(类似大多数扩展提供的初始化类),传入当前应用实例和set:

photos = UploadSet('photos', IMAGES)
configure_uploads(app, photos)

这里的photos是set的名字,它很重要。因为接下来它就代表你已经保存的文件,对它调用save()方法保存文件,对它调用url()获取文件url,对它调用path()获取文件的绝对地址……(你可以把它类比成代表数据库的db)

2、文件名过滤

不再需要secure_filename()函数来处理文件名,使用set的save()方法直接保存从request对象获取的文件,将返回处理后的文件名:

filename = photos.save(request.files['photo'])

可能还需要再提醒一下,这里的['photo']是input字段的name值。

3、限制文件大小

导入patch_request_class()函数,传入应用实例和大小(默认为16MB),比如:

patch_request_class(app)

或是

patch_request_class(app, 32 * 1024 * 1024)  # 或是从配置里读取大小

获取文件 你不必再创建新的视图函数来获取文件,Flask-Uploads自带了一个视图函数,当你对一个set(比如我们上面创建的photos)使用url()方法(传入文件名作为参数),比如:

photos.url('demo.jpg')

它会返回一个文件的url:

http://example.com/_uploads/photos/demo.jpg  # /<setname>/<path:filename>

三、使用Flask-WTF

完整实现demo,这次把HTML代码放在了单独的文件,效果仍然和之前两个版本相同。

upload.py

# -*- coding: utf-8 -*-
import os

from flask import Flask, render_template
from flask_uploads import UploadSet, configure_uploads, IMAGES, patch_request_class
from flask_wtf import FlaskForm
from flask_wtf.file import FileField, FileRequired, FileAllowed
from wtforms import SubmitField

app = Flask(__name__)
app.config['SECRET_KEY'] = 'I have a dream'
app.config['UPLOADED_PHOTOS_DEST'] = os.getcwd()

photos = UploadSet('photos', IMAGES)
configure_uploads(app, photos)
patch_request_class(app)  # set maximum file size, default is 16MB

class UploadForm(FlaskForm):
    photo = FileField(validators=[
        FileAllowed(photos, u'只能上传图片!'), 
        FileRequired(u'文件未选择!')])
    submit = SubmitField(u'上传')

@app.route('/', methods=['GET', 'POST'])
def upload_file():
    form = UploadForm()
    if form.validate_on_submit():
        filename = photos.save(form.photo.data)
        file_url = photos.url(filename)
    else:
        file_url = None
    return render_template('index.html', form=form, file_url=file_url)

if __name__ == '__main__':
    app.run()

模板文件:index.html

<!DOCTYPE html>
<title>Upload File</title>
<h1>图片上传</h1>
<form method="POST" enctype="multipart/form-data">
     {{ form.hidden_tag() }}
     {{ form.photo }}
     {% for error in form.photo.errors %}
         <span style="color: red;">{{ error }}</span>
     {% endfor %}
     {{ form.submit }}
</form>

{% if file_url %}
<br><img src="{{ file_url }}">
{% endif %}

1、初始化

为CSRF保护创建SECRET_KEY设置:

app.config['SECRET_KEY'] = 'a random string'

2、创建表单

使用Flask-WTF提供的FileField字段以及FileRequiredFileAllowed验证函数

from flask_wtf.file import FileField, FileRequired, FileAllowed

可以传入错误信息:

photo = FileField(u'图片上传', validators=[
    FileAllowed(photos, u'只能上传图片!'), 
    FileRequired(u'文件未选择!')
])

这里FileAllowed()的第一个参数是使用Flask-Uploads设置的set名称,如果不使用Flask-Uploads,可以替换成文件后缀组成的列表,比如['jpg', 'png']。

3、在模板中渲染错误信息

{% for error in form.field.errors %}
    {{ error }}
{% endfor %}

这里面的field是字段名称,比如上面的photo。

4、获取文件

文件数据不再从request对象获取,而是使用data方法获取:

filename = photos.save(form.photo.data)

注:转载本文,请与作者联系




如果觉得文章对您有价值,请作者喝杯咖啡吧

|
donate qrcode

欢迎通过微信与我联系

wechat qrcode