区分图像错误和表格错误

Posted 2023-03-14

【中文标题】区分图像错误和表格错误

【英文标题】：Differentiate image errors and form errors

【发布时间】：2015-09-08 13:34:23

【问题描述】：

我正在使用dropzone.js。我有一个表单，在单击提交按钮时会同时提交输入和图像。但是，当我返回一个输入（不是图像）错误的错误时，error 事件也会显示图像有错误，即使它没有。

例如，如果其中一个输入为空并且表单返回错误消息“请填写表单”，则上传的图像也会（错误地）出现错误，并且 html 中会发生这种变化：

<div class="dz-error-message"><span data-dz-errormessage="">[object Object]</span></div>

实际返回的错误（注意图片没有错误）：

"success":"false","messages":"message":["The message field is required."]

我的问题是，如何修改我的代码以识别返回的错误是图像错误还是表单输入错误？

这是我的 JS：

Dropzone.options.formPost = 
    autoProcessQueue: false,
    uploadMultiple: true,
    parallelUploads: 25,
    maxFiles: 25,
    maxFilesize: 5,
    acceptedFiles: "image/*",
    clickable: "#image-upload",

    init: function() 
        var myDropzone = this;
        var form = $("#form-post");

        this.element.querySelector('button[type="submit"]').addEventListener("click", function(e)
        
            e.preventDefault();
            e.stopPropagation();
            myDropzone.processQueue();
        );

        this.on("addedfile", function()
        
            // some stuff
        );
        this.on("sendingmultiple", function()
        
            // some stuff
        );
        this.on("successmultiple", function(files, response)
        
            // some stuff
        );
        this.on("errormultiple", function(files, response)
        
            // if an error is return, even though it has nothing to do with the image, it will show that the image has an error
            $.each(response.messages, function(key, value)
            
                form.find('.form-group#' + key).addClass('has-error');
                form.find('.form-group#' + key + ' .form-error').html(value[0]).fadeIn();
            );
        );
    

php (Laravel)：

public function createPost()

    $rules = array(
        'message' => 'required',
    );

    $validator = Validator::make(Input::except('file'), $rules);

    if ($validator->fails())
    
        return Response::json(array(
            'success' => 'false',
            'messages' => $validator->messages()
        ), 400);
    
    else
    
        $post = new Post;
        $post->user_id = getUserID();
        $post->message = Input::get('message');
        $post->ip_address = getUserIP();
        $post->save();

        $files = Input::file('file');

        if ($files)
        
            /**
             * Create a new directory for the post images.
             */
            File::makeDirectory(public_path() . '/uploads/posts/' . $post->id, 0775);

            foreach ($files as $file)
            
                $file_rules = array('file' => 'image|max:5000');
                $validator = Validator::make(array('file' => $file), $file_rules);

                if ($validator->fails())
                
                    return Response::json(array(
                        'success' => 'false',
                        'messages' => $validator->messages()
                    ), 400);
                
                else
                
                    $ext = $file->getClientOriginalExtension();
                    $dest = public_path() . '/uploads/posts/' . $post->id . '/';
                    $file_name = str_random(6);

                    $upload_success = $file->move($dest, $file_name . '.' . $ext);

                    if (!$upload_success)
                    
                        return Response::json(array(
                            'success' => 'false',
                        ), 400);
                    
                
            
        

        return Response::json(array(
            'success' => 'true'
        ), 200);
    

【参考方案1】：

很可能，以下代码在不应该这样做时更改了图像字段。

form.find('.form-group#' + key).addClass('has-error');
form.find('.form-group#' + key + ' .form-error').html(value[0]).fadeIn();

您可以在浏览器的 JS 控制台中手动检查 form.find('.form-group#whatever') 是否真的能够指向正确的元素。也许form.find('.form-group#whatever') 指向所有输入元素，这会导致问题。

查看 HTML 代码也会很有帮助。