Flask中使用Flask-WTF中的FileField()实现文件上传和预览功能

发布时间：2024-01-17 12:05:10

在Flask中使用Flask-WTF的FileField()来实现文件上传和预览功能非常简单。FileField()是用于处理文件上传的表单字段，可以接收用户上传的文件，并且提供文件预览的功能。

首先，我们需要安装Flask和Flask-WTF。可以使用pip来安装它们：

$ pip install flask
$ pip install Flask-WTF

接下来，我们需要创建一个Flask应用并设置一些配置。在app.py中编写以下代码：

from flask import Flask, render_template
from flask_wtf import FlaskForm
from wtforms import FileField
from wtforms.validators import DataRequired

app = Flask(__name__)
app.config['SECRET_KEY'] = 'your-secret-key'

class UploadForm(FlaskForm):
    file = FileField('选择文件', validators=[DataRequired()])

@app.route('/', methods=['GET', 'POST'])
def index():
    form = UploadForm()
    
    if form.validate_on_submit():
        file_data = form.file.data
        file_path = 'uploads/' + file_data.filename
        file_data.save(file_path)
        
        return render_template('preview.html', file_path=file_path)
    
    return render_template('index.html', form=form)

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

在上面的代码中，我们创建了一个名为UploadForm的FlaskForm子类，该类包含了一个FileField字段，用于接收用户上传的文件。然后，我们定义了一个根路由'/'，并创建了一个index()视图函数来处理请求。

在index()视图函数中，我们首先实例化UploadForm类，然后检查表单是否被提交并通过验证。如果表单验证通过，我们获取用户上传的文件对象file_data，并将其保存到'uploads/'目录下。接下来，我们渲染一个名为preview.html的模板，并将文件路径传递给模板，以便在预览页面中显示文件。

如果表单未提交或者验证不通过，我们渲染一个名为index.html的模板，并传递表单对象给模板，以便在页面上显示表单。

接下来，我们创建两个模板文件'index.html'和'preview.html'。在templates目录下创建这两个文件，并编写以下代码：

index.html:

<!DOCTYPE html>
<html>
<head>
    <title>文件上传</title>
</head>
<body>
    <h1>文件上传</h1>
    <form method="POST" enctype="multipart/form-data">
        {{ form.csrf_token }}
        {{ form.file.label }}
        {{ form.file }}
        {% if form.file.errors %}
            <ul>
                {% for error in form.file.errors %}
                    <li>{{ error }}</li>
                {% endfor %}
            </ul>
        {% endif %}
        <br>
        <input type="submit" value="上传">
    </form>
</body>
</html>

preview.html:

<!DOCTYPE html>
<html>
<head>
    <title>文件预览</title>
</head>
<body>
    <h1>文件预览</h1>
    <img src="{{ file_path }}" alt="预览">
</body>
</html>

在index.html模板中，我们使用Flask-WTF生成的表单字段对象来创建表单，在文件字段后面添加了一个提交按钮。在form标签中使用enctype="multipart/form-data"来表示提交的是文件数据。如果文件字段验证不通过，我们在页面上显示错误消息。

在preview.html模板中，我们显示了用户上传的文件的预览，使用img标签的src属性来加载文件的路径。

最后，在终端中运行app.py脚本，并在浏览器中打开http://localhost:5000/，你将看到一个文件上传表单。选择一个文件并点击上传按钮，然后将被重定向到一个预览页面，该页面会显示所上传的文件的预览图像。

这就是在Flask中使用Flask-WTF中的FileField()实现文件上传和预览功能的方法。希望本文对你有所帮助！