Dropzonejs 无法正确提交

Question

这是我的 dropzone 配置：

var myDropzone = new Dropzone(".myDZ", {
    url: $('#form').attr('action'), 
    previewTemplate: previewTemplate,
    uploadMultiple: true, 
    previewsContainer: "#previews", 
    clickable: "#fileinput-btn", 
    autoProcessQueue: false,
    init: function() {
        var dz = this;
        this.element.querySelector("button[type=submit]").addEventListener("click", function (e) {
            e.preventDefault();
            dz.processQueue();
        });
    }
});

按下提交按钮后，我可以从后端看到数据提交正确。但是，后端返回响应后，前端不会对其做出反应。表单页面保持不变，不显示返回的消息，再次点击提交按钮不会触发任何提交。

我试过了：

this.element.querySelector("button[type=submit]").addEventListener("click", function (e) {
            e.preventDefault();
            dz.processQueue();
            document.getElementById("form").submit();
        });
    }
});

这将强制表单提交两次，但在第二次尝试后显示正确的响应。这可行，但感觉不对。

对可能出现的问题有什么建议吗？

Answer 1

我同意提交两次有点脏。 您可能会尝试在成功函数中捕获您的响应，因为 Dropzone 正在异步等待。

var myDropzone = new Dropzone(".myDZ", {
    url: $('#form').attr('action'), 
    previewTemplate: previewTemplate,
    uploadMultiple: true, 
    previewsContainer: "#previews", 
    clickable: "#fileinput-btn", 
    autoProcessQueue: false,
    init: function() {
        var dz = this;
        this.element.querySelector("button[type=submit]").addEventListener("click", function (e) {
            e.preventDefault();
            dz.processQueue();
        });
    },
    // Try this success.
    success: function (data, response) {
        console.log(response);
    }
});