python - 当 wtforms 中发生另一个验证错误时，文件字段无法保存文件

Question

我正在尝试验证表单中的电子邮件和电话号码。已完成，但发生此验证错误时，文件字段无法保存上传的文件。我的表格如下。

forms.py

from wtforms import Form ,SelectField,StringField, validators  , IntegerField , DateField , SelectMultipleField , FileField ,widgets
            
from wtforms.validators import StopValidation, ValidationError
            
def customvalidatorForAdImage(form, field):
                allowed_file = ['jpg','jpeg','png','gif']
                if form.image.data:
                    if form.image.data.split('.',1)[1] not in allowed_file:
                        raise ValidationError("Please enter a valid image file")    
class CreateAdForm(Form):
            ad_name = StringField("Ad Name", [validators.DataRequired("Ad name is required")])
            advertiser_name =SelectField("Advertiser Name" , coerce=int)
            ad_type = SelectField("Ad Type" ,  choices =zip( ad_type_categories , ad_type_cat_lebels))
            image = FileField("Image" , [customvalidatorForAdImage, validators.DataRequired("Image is required")])
            url = StringField("URL" , [validators.DataRequired("URL is required")])
            contact_name = StringField("Contact Name" , [validators.DataRequired("Contact Name is required")])
            contact_email = StringField("Contact Email" , [validators.DataRequired("Contact Email is required"), validators.Email("Please enter a valid email")])
            contact_phone = StringField("Contact Phone" , [validators.DataRequired("Contact Phone is required"), validators.Regexp("^(\+\d{1,3}[- ]?)?\d{10}$", message="Please enter a valid phone number")])
            status = SelectField("Status" , choices = zip(status_categories , status_cat_lebles))      
            

我的 ad.html 文件如下:

ad.html

{% extends "base.html" %}
{% set title = "Admin Manage Advertisers" %}
{% block head_css %}

{% endblock %}
{% block main_body %}
<div class="container">
    <div class="row">
        <div class="col-sm-8 col-sm-offset-2">
            {% if err_msg %}
             <div class="alert alert-danger alert-msg-with-icon" role="alert"> 
             <i class="icon-exclamation-sign" style="font-size:60px;color:#B94A48;"></i> 
             <p>{{err_msg}}<br> If you believe this message is in error, please reach out to <a href='mailto:webmaster@tunneltalk.com' class="alert-link">webmaster@tunneltalk.com</a></p>
             </div>
            {% endif %}
            <h1 class="text-center"><strong>Create a New Ad</strong></h1>
            <form action="/create-ad" enctype="multipart/form-data" method="POST">
              <div class="form-group">
                {{ ad_form.ad_name.label }}
                {{ ad_form.ad_name(class_="form-control", **{"data-parsley-required":"true", 
                                                          "data-parsley-required-message":"Ad name is required"}) }}
                
                <span class="help-block"></span>
              </div>
             <div class="row">
                <div class="col-md-5">
               <div class="form-group" >
                {{ ad_form.advertiser_name.label }}
                {{ ad_form.advertiser_name(class_="form-control" , **{"data-parsley-required":"true", 
                                                          "data-parsley-required-message":"Advertiser name is required"}) }}
                
                                                          
                <span class="help-block"></span>
              </div>
              </div>
               <div class="col-md-5 col-md-offset-2">
              <div class="form-group" >
                {{ ad_form.ad_type.label }}
                {{ ad_form.ad_type(class_="form-control", **{"data-parsley-required":"true", 
                                                          "data-parsley-required-message":"Ad type is required"
                                                          }) }}
                <span class="help-block"></span>
              </div>
              </div>
              </div>
              <div class="row">
                <div class="col-md-5">
              <div class="form-group {{ 'has-error' if ad_form.image.errors}}">
                {{ ad_form.image.label }}
                {{ ad_form.image( **{"data-parsley-required":"true", 
                                                          "data-parsley-required-message":"Image is required",
                                                          
                                                          }) }}
                <span class="help-block">{{ ad_form.image.errors[0] if ad_form.image.errors }}</span>
              </div>
              </div>
             <div class="col-md-5 col-md-offset-2">
                <div class="form-group" >
                {{ ad_form.status.label }}
                {{ ad_form.status(class_="form-control", **{"data-parsley-required":"true", 
                                                          "data-parsley-required-message":"Status is required"
                                                          }) }}
                <span class="help-block"></span>
              </div>
              </div>
              </div>
              <div class="form-group" >
                {{ ad_form.url.label }}
                {{ ad_form.url(class_="form-control", **{"data-parsley-required":"true", 
                                                          "data-parsley-required-message":"URL is required"
                                                          }) }}
                <span class="help-block"></span>
              </div>
              <div class="form-group">
                {{ ad_form.contact_name.label }}
                {{ ad_form.contact_name(class_="form-control", **{"data-parsley-required":"true", 
                                                          "data-parsley-required-message":"Contact Name is required"
                                                          }) }}
                <span class="help-block"></span>
              </div>
              <div class="form-group {{ 'has-error' if ad_form.contact_email.errors}}" >
                {{ ad_form.contact_email.label }}
                {{ ad_form.contact_email(class_="form-control", **{"data-parsley-required":"true", 
                                                          "data-parsley-required-message":"Contact Email is required"
                                                          }) }}
                <span class="help-block">{{ ad_form.contact_email.errors[0] if ad_form.contact_email.errors }}</span>
              </div>
              <div class="form-group {{ 'has-error' if ad_form.contact_phone.errors}}" >
                {{ ad_form.contact_phone.label }}
                {{ ad_form.contact_phone(class_="form-control", **{"data-parsley-required":"true", 
                                                          "data-parsley-required-message":"Contact Phone is required"
                                                          }) }}
                <span class="help-block">{{ ad_form.contact_phone.errors[0] if ad_form.contact_phone.errors }}</span>
              </div>
              
              <button type="submit" class="btn btn-primary btn-block">SUBMIT</button>
            </form>
        </div>
    </div>
</div>
{% endblock %}
{% block contact_us_block %}
{% endblock %}
{% block js_block %}
{{super()}}

<script>
$(document).ready(function(){
    
    $("div.container form").parsley({
        successClass: "",
        errorClass: "has-error",
        classHandler: function(el) {
            return el.$element.closest(".form-group");
        },
        errorsWrapper: "<span class='help-block'></span>",
        errorTemplate: "<span></span>"
    });
    
})
</script>
{% endblock %} 

并在表单提交之前查看屏幕截图。这里我选择了一个图像文件和无效的电子邮件。

但是当我单击提交按钮时，它显示电子邮件验证错误，但无法保存所选的图像文件。我该如何解决这个问题？提交后查看屏幕截图。它在文件字段中显示“未选择文件”，但我已经选择了该文件。谢谢。

Answer 1

这是 HTML 的一项功能，您无法轻松解决它。如果服务器可以向客户端发送一个带有一些额外信息的html页面，内容是“嘿，您尝试上传REALLY_SECRET_FILE，请自动再次附加它”您可以轻松地想象一下它被用于不良目的(特别是因为您可以使用 CSS 隐藏文件字段)。

因此，您想到了剩下的两个选项 - 您说表单未验证，但您可以选择先验证文件字段，然后将其存储在服务器上，然后if 剩余的表单验证失败，您可以从发送回客户端的预填充表单字段中删除该表单字段，并将其替换为已上传文件的缩略图等。

另一个选择是更加依赖流程的客户端 - 进行更多的客户端验证，以减少提交的表单验证失败的可能性，但当然，仍然在服务器上进行验证 -一边陷入奇怪或顽皮的情况。