javascript - Dropzone 处理队列不适用于服务器端验证

Question

我在表单中使用 Laravel 5.8 和集成的 dropzone。在我的表单中，我在服务器端对帖子标题进行了唯一验证。

问题场景是

1.用户将输入博文标题并在 dropzone 中添加 5 张图片。

2.那么如果输入的标题已经存在则验证错误

3.再次验证错误后，如果我们尝试提交表单，则请求将不会发送到服务器。这意味着 dzClosure.processQueue(); 失败

document.getElementById("submitArticleFormButton").addEventListener("click", function(e) {
 if (dzClosure.files.length>0) {
                        ;

                        dzClosure.processQueue(); 
                    } else {

                        dzClosure.uploadFiles([]);


                    }
}

我该如何解决这个问题。

当我审阅一些问题时，我发现了以下文档 https://github.com/enyo/dropzone/wiki/FAQ#how-to-show-an-error-returned-by-the-server

即使我的情况是抛出验证错误然后它将是 419 但仍然没有按预期工作

更新我只有在服务器端验证以外的情况下才能正常工作。即使在验证抛出后，如果我添加额外的图像，然后如果我尝试提交，它也会正常工作。甚至我已经包含了 csrf token 和 419 其自定义 header 集

  public function respond($data, $headers = [])
    {
        $data['error']="error occured";
        return response()->json($data,419, $headers);
    }

Answer 1

您是否已将 CSRF token 附加到 dropzone header ？我前一段时间遇到了同样的问题，并且能够通过将 CSRF token header 与 Dropzone 一起使用来解决它。

首先，您需要打印我们的 CSRF token

   var CSRF_token = {% csrf_token %};

然后将其包含在您的请求中。

   sending: function(file, xhr, formData) {
      formData.append("csrf_token", CSRF_token);
   }

---

更新的答案，

尝试手动将 Dropzone 文件状态更新为 Queued，以便 dropzone 再次上传相同的图像。

dzClosure.files.forEach(file => {
   file.status = Dropzone.QUEUED
})