（一）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字段以及FileRequired、FileAllowed验证函数

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)
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 219,427评论 6赞 508
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 93,551评论 3赞 395
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 165,747评论 0赞 356
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,939评论 1赞 295
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,955评论 6赞 392
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,737评论 1赞 305
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,448评论 3赞 420
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,352评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,834评论 1赞 317
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,992评论 3赞 338
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,133评论 1赞 351
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,815评论 5赞 346
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,477评论 3赞 331
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,022评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,147评论 1赞 272
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 48,398评论 3赞 373
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 45,077评论 2赞 355