将数组输入发送到后端时，Dropzone 插入与相同数量的文件相同数量的值答案

【问题标题】：Dropzone inserting the same number of values as the same number of files when sending array inputs to backend将数组输入发送到后端时，Dropzone 插入与相同数量的文件相同数量的值
【发布时间】：2020-06-05 02:41:25
【问题描述】：

我有一个简单的保管箱，可以在单击按钮时手动上传文件：

var dropzone = $("#dropzone-form").dropzone({
        autoProcessQueue: false,
        addRemoveLinks: true,
        paramName: "fotos",
        url: url,
        uploadMultiple: true,
        init: function(){
            var dropzone_object = this;



            $('#btn-guardar').on('click', function(e){
                if(checkForm()){
                    if(dropzone_object.files.length > 0){
                        dropzone_object.processQueue();
                    }else{
                      sendWithoutFiles();
                    }

                }
            });


        },
        sending: function(file, xhr, formData) {

            var formValues = $('#form-productos').serializeArray();
            $.each(formValues, function(i, obj){
               formData.append(obj.name, obj.value);
            });


        },
        success: function(file, response){

        },
        error: function(file, errorMessage, xhr){

        }
    });

但是当我上传多个文件时我遇到了问题，因为我的表单中有数组输入，ID 为 form-productos，例如：

<input name="emails[]">

或

<select name="colors[]"></select>

因此，对于 dropzone 队列具有的每个文件，它会再次附加输入，不是数组输入的输入没有问题，因为该值再次被覆盖，所以假设我有以下输入（注意值）：

<input name="emails[]" value="email1">
<input name="emails[]" value="email2">

另外，假设我在队列中有 2 个文件，当我按下按钮并将数据发送到 PHP 时，当我打印“$request->emails”时得到以下信息：

array(
   'email1',
   'email2', //After this, since I uploaded two files, I get the same values again:
   'email1',
   'email2'  
)

阅读 dropzone documentation 清楚地表明这是正确的行为：

sending：在发送每个文件之前调用。获取 xhr 对象和 formData 对象作为第二个和第三个参数，因此您可以修改它们（例如添加 CSRF 令牌）或添加其他数据。

那么，问题就在我这边，当附加到formData 时，我能做些什么来防止这种情况发生？

【问题讨论】：

标签： javascript php laravel dropzone

【解决方案1】：

我解决了这个问题，轻松地将send 事件替换为sendingmultiple，当uploadMultiple 选项设置为true 时，应该在大多数情况下使用此事件：

sendingmultiple: function(files, xhr, formData) {

            var formValues = $('#form-productos').serializeArray();
            $.each(formValues, function(i, obj){
               formData.append(obj.name, obj.value);
            });


        },

不同的是，这个事件接收一个文件数组作为第一个参数，这样事件内部的过程只执行一次。

【讨论】：