如何使用 WTF 表单快速表单上传图像

Question

我无法在其他字段中上传图像。虽然其他字段的数据存在，但图像不存在，因此表单没有被验证。

这里是后端，具体看图片文件字段，标有#IMAGE

from flask import Blueprint, request, render_template, redirect, flash
import os
from flask import current_app as app
from src.models.products.product import Product
from flask_wtf import FlaskForm
from wtforms import StringField, BooleanField, FileField, SubmitField
from wtforms.validators import InputRequired
from flask_wtf.file import FileField, FileRequired
from werkzeug.utils import secure_filename


dash_board_blueprint = Blueprint('dashboard', __name__, template_folder='templates')


class UploadForm(FlaskForm):
    name = StringField('Name', validators=[InputRequired()])
    category = StringField('Category', validators=[InputRequired()])
    sub_category = StringField('Sub Category', validators=[InputRequired()])
    size = StringField('Size', validators=[InputRequired()])
    variant = StringField('Variant', validators=[InputRequired()])
    price = StringField('Price', validators=[InputRequired()])
    enable_discount = BooleanField('Enable Discount')
    discount_price = StringField('Discount Price', validators=[InputRequired()])
    in_stock = BooleanField('In Stock')
    stock_amount = StringField('Stock Amount')
    text = StringField('Text')
    display_popular = BooleanField('Display Popular')
    image = FileField(validators=[FileRequired()]) # IMAGE
    submit = SubmitField("Add Product")

@dash_board_blueprint.route('/')
def dashboard():
    return render_template("dashboard/dashboard2.html", form=UploadForm())


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

    form = UploadForm()

    filename = form.image
    print("File Name:")
    print(filename)

任何类型的验证都失败并且图像包含 None

这是 HTML：

{% extends "dashboard_base.html" %}

{% block content %}

    {% macro render_form(form, action) %}
        {% from "_formhelpers.html" import render_field %}
        <div id="Product" class="variant-block" style="display: block;">
            {% from "_formhelpers.html" import render_field %}
            {% import "bootstrap/wtf.html" as wtf %}
            {{ wtf.quick_form(form, action=action, extra_classes="size-options", button_map={'submit':'light'}) }}
        </div>
    {% endmacro %}

    <div class="container-fluid">
        <div class="row" style="background-color: #FAF6EA !important; height: 125px"></div>
    </div>
    <div class="container-fluid">
        <div class="row">

            <!-- *** Product Creation *** -->
            <div style="background-color: #FAF6EA !important; " class=" container col-sm-4 mt-3 py-3 pl-5">
                {{ render_form(form, url_for('dashboard.upload')) }}
            </div>

Answer 1

你enctype="multipart/form-data"在你的表格中设置吗？

根据 Flask-WTF 文档：

记得将 HTML 表单的 enctype 设置为 multipart/form-data，否则 request.files 将为空。

<form method="POST" enctype="multipart/form-data">
    ...
</form>

你的例子让我相信你正在使用 Flask-Bootstrap 扩展。如果是，enctype则应自动设置为，"multipart/form-data"如果您没有明确设置它并FileField出现在您的表单中（根据文档。但是，我想知道您如何声明您的表单是否导致情况并非如此. 您可能想尝试enctype在表单语句中显式设置。