Dropzone.js 失败后如何允许重新提交文件上传？

Question

我有一个文件上传表单，它使用 Dropzone.js 将文件上传到我的服务器。用户一次最多可以上传 5 个文件，但我正在处理一个独特的情况：如果服务器端出现任何单个文件错误（超过最大大小、错误的 mime 类型、错误的文件类型等） ，我不需要将任何文件添加到我的数据库中。这不是问题。

我遇到的问题是客户端处理它。为什么当我收到服务器的响应时，我无法再通过单击“提交”（其元素绑定到事件处理程序，如下所示）再次上传文件？

        Dropzone.options.uploadedFilesDropzone = {
              autoProcessQueue: false,
              maxFilesize: 1024, //MB
              addRemoveLinks: true,
              uploadMultiple: true,
              parallelUploads: 5,
              maxFiles: 5,
              init: function() {

                var uploadedFilesDropzone = this;

                $('#submit').on('click', function() {
                    uploadedFilesDropzone.processQueue();

                    uploadedFilesDropzone.on("successmultiple", function(files, response) {
                        // Handle the responseText here. For example, add the text to the preview element:
                        console.log(files);
                        console.log(response.errors[0]);
                        $.each(files, function(index, file) {
                            // no errors
                            if (response.errors[index].length == 0) {

                            } else {
                                file.previewElement.classList.add('dz-error');
                            }
                        })
                     });
                });
              }
        }

Answer 1

一旦调用processQueue()，文件就会从 Dropzone 队列中删除。由于队列中没有文件，您无法再通过单击提交来上传文件。

您需要在收到响应后将每个文件重新添加到队列中。

如果文件服务器端出现错误，最好将响应的状态代码设置为 200 以外的值，以便您可以覆盖 Dropzone 错误侦听器。

    this.on("error", function(file, errorMessage) {
        $.each(dropZone.files, function(i, file) {
            file.status = Dropzone.QUEUED
        });

        $.each(message, function(i, item) {
            $("#dropzoneErrors .errors ul").append("<li>" + message[i] + "</li>")
        });
    });