使用Flask-Dropzone在Flask程序中实现文件上传

时间 2019-11-17

标签使用 flask dropzone 程序实现文件上传栏目 Python 繁體版

原文原文链接

某天在Stack Overflow上看到一个关于Dropzone.js的问题，研究以后写了一个回答。我发现，若是有一个集成Dropzone.js到Flask，而且简化设置步骤的扩展，确定要比其余上传方式简单的多——因而就有了 Flask-Dropzone。

Dropzone.js是一个提供文件上传、验证、预览、上传进度条等功能的JavaScript库。Flask-Dropzone在模板中提供了一些方法来帮助你建立上传区域，引入相关资源。你只须要添加一些配置就能够实现上传类型的过滤，文件大小限制，上传后跳转等功能。固然，你还要本身编写视图函数来处理和保存文件，并进行服务器端的二次验证。若是你不熟悉服务器端的上传文件处理，能够考虑浏览一下这篇《Flask文件上传（一）：原生实现》。

《Flask Web开发实战》中的第3个示例程序（图片社交程序Albumy）使用了这个扩展。

用法介绍

安装

$ pip install flask-dropzone复制代码

初始化

和其余扩展相似，你能够经过实例化Dropzone类，并传入程序实例app进行初始化：

from flask_dropzone import Dropzone

app = Flask(__name__)
dropzone = Dropzone(app)复制代码

在使用工厂函数建立程序实例时，你也可使用init_app()方法：

from flask_dropzone import Dropzone

dropzone = Dropzone()

def create_app():
    app = Flask(__name__)
    dropzone.init_app(app)
    return app复制代码

引入Dropzone.js资源

你须要本身手动编写引入Dropzone.js的CSS和JavaScript资源的语句。在开发时，或对于玩具项目，你能够可使用Flask-Dropzone提供的两个快捷方法：

<head> ... {{ dropzone.load_css() }} </head> <body> ... {{ dropzone.load_js() }} </body>复制代码

建立并美化上传区域

若是你不须要对上传区域的样式有太多控制，那么你只须要在想要渲染上传区域的地方使用dropzone.create()方法：

{{ dropzone.create(action='处理上传文件的路由URL') }}复制代码

记得把action参数的值更改为你要处理文件上传的的URL。你可使用dropzone.style()方法为上传区域添加简单的自定义样式：

<head>
...  <!-- 在引入Dropzone.js的CSS文件后调用style()方法 -->
{{ dropzone.style('border: 2px dashed #0087F7; margin: 10%') }}
</head>复制代码

上传区域的截图示例以下所示：

在服务器端处理并保存上传文件

当文件被拖拽到上传区域，或是点击上传区域选择上传文件后，这些文件会以AJAX请求的形式发送到你在dropzone.create()方法中使用action参数传入的URL。咱们须要在服务器端建立对应的视图函数来处理这些请求，下面是一个最基本的示例：

import os

from flask import Flask, request
from flask_dropzone import Dropzone

app = Flask(__name__)

dropzone = Dropzone(app)

@app.route('/uploads', methods=['GET', 'POST'])
def upload():

    if request.method == 'POST':  # 若是请求类型为POST，说明是文件上传请求
        f = request.files.get('file')  # 获取文件对象
        f.save(os.path.join('the/path/to/save', f.filename))  # 保存文件

    return 'upload template'  # 渲染上传页面复制代码

上传完成后重定向

这里须要注意的是，由于Dropzone.js经过AJAX请求提交文件，因此你无法在保存文件后将页面重定向。对于这个问题，你可使用配置变量DROPZONE_REDIRECT_VIEW设置上传完成后跳转到的目标端点，或是添加一个按钮让用户本身点击进行跳转。

服务器端验证

尽管Dropzone.js能够在前端对用户提交的文件进行验证，但为了安全考虑，咱们仍然须要在服务器端进行二次验证。在服务器端验证时，若是验证出错，咱们不能像往常那样使用flash()函数“闪现”错误消息，由于AJAX请求接受到响应后并不会重载页面，因此不会显示经过flash()函数发送的消息。正确的作法是返回400错误响应，使用错误消息做为响应的主体。下面是一个简单的进行服务器端验证并返回错误消息得示例：

@app.route('/', methods=['POST', 'GET'])
def upload():
    if request.method == 'POST':
        f = request.files.get('file')
        if f.filename.split('.')[1] != 'png':
            return 'PNG only!', 400  # return the error message, with a proper 4XX code
        f.save(os.path.join('the/path/to/save', f.filename))
    return render_template('index.html')复制代码

在上面的代码中，咱们验证图片是否是png格式，若是不是就返回一个错误提示，在服务器端会在图片下面看到咱们返回的错误消息：

完整的配置列表

Flask-Dropzone提供了丰富的配置变量，你可使用它们对Dropzone.js进行各种配置。很遗憾掘金的编辑器不支持表格，因此这里只能插入一张图片，若是你须要文本，能够访问这篇文章。

这些配置的用法你能够参考Flask-Drozone的文档或是示例程序了解，这里咱们仅简单介绍一下对文件类型进行过滤的设置方法。

设置文件类型过滤

Flask-Dropzone内置了一些文件类型（经过MIME定义），可选的值和对应的文件类型以下所示：

default：默认值，运行全部类型
image：图片
audio：音频
video：视频
text：文本
app：程序

你须要为DROPZONE_ALLOWED_FILE_TYPE设置对应的值，好比下面设置仅容许上传图片：

app.config['DROPZONE_ALLOWED_FILE_TYPE'] = 'image'复制代码

若是你想要本身定义容许的文件类型列表，那么你须要将DROPZONE_ALLOWED_FILE_CUSTOM设置True，而后传入一个包含容许的文件后缀名列表组成的字符串给DROPZONE_ALLOWED_FILE_TYPE变量，使用逗号分隔多个后缀名，好比：

app.config['DROPZONE_ALLOWED_FILE_CUSTOM'] = True
app.config['DROPZONE_ALLOWED_FILE_TYPE'] = 'image/*, .pdf, .txt'复制代码

对于平行上传、CSRF保护等内容的具体实现方法你能够参考文档了解。不过，这个项目目前尚未建立完善的文档，暂时只是写到README里，若是你发现了英文语法或拼写错误，欢迎指正，同时也欢迎为项目贡献代码。

示例程序

Flask-Dropzone的Git仓库中的 examples目录下包含4个示例程序，分别演示了基本用法、CSRF保护、平行上传和上传完成后跳转四个功能。

另外， helloflask仓库里在demos/form目录下的示例程序也包含一个Flask-Dropzone使用示例。