如何使用 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)

任何形式的验证都失败并且图像包含无

这是 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"？

Per the Flask-WTF docs：

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

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

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