如何通过 Dropzone.js 删除或更新服务器上已上传的文件

Question

我有可以包含多个图像的公告对象。我设法创建了通过 dropzone 上传文件的表单。现在我想授予公告的作者对其进行编辑的权限，这意味着也可以编辑图像。编辑图像意味着对它们重新排序、删除其中一些（或全部）或添加更多。

我想要做的是加载公告对象并将图像添加到 dropzone 对象，以便当用户单击提交按钮时，所有图像都将与其余公告的数据一起发送。换句话说，将图像排入 dropzone 并再次提交它们。这样在服务器端我可以看到哪些文件是新的，哪些是丢失的，顺序是什么等等。

到目前为止我做了什么：

• 我看到了如何通过FAQ of dropzone 显示已经从服务器上传的文件，并且我成功地显示了它们。这段代码非常适合我：

  var mockFile = { name: "Filename", size: 12345 };
  myDropzone.emit("addedfile", mockFile);
  myDropzone.emit("thumbnail", mockFile, "/image/url");
  myDropzone.createThumbnailFromUrl(file, imageUrl);
  

  好的，但是这样我发现我无法将它们排入队列。

• 然后，我查看了 dropzone 的代码，发现了一个非常有用的方法addFile(file);。这个方法实际上完成了上面代码所做的所有事情——将文件推送到dropzone.files 数组，发出 addedfile 事件，将其添加到缩略图队列，验证文件，如果一切正常，则将文件入队。所以我的代码现在看起来像这样：

  var mockFile = { name: "Filename", size: 12345, type: "jpg" }; // The type is required by the _enqueueThumbnail() method
  myDropzone.addFile(mockFile);
  myDropzone.createThumbnailFromUrl(file, imageUrl);
  

  通过此代码更正，我设法将文件排入队列。问题是，当我尝试将数据发送到服务器时，出现以下错误：

TypeError：FormData.append 的参数 2 没有实现接口 Blob

我在 stackoverflow 上看到了一个 answer 关于这个，但这对我来说似乎是一个非常复杂的解决方法，因为我需要做的简单操作。

有没有其他更简单的解决方案可以达到这个目的？您如何编辑上传到服务器的图像？您将如何重新排序图像，或在队列中添加/删除图像？

提前致谢！

Answer 1

我自己设法做到了。我使用的是 PHP，所以我会用 PHP 术语来解释它。

客户：基本上我检查我是否处于更新或创建模式。如果我处于更新模式，我会加载现有图片并将它们完全按照dropzone's FAQ 中的描述显示给用户。

我还保留了一个名为 order 的数组，其中包含所有图像。我总是在对图像执行操作时更新这个数组——添加一个新数组，删除，重新排序。我是处于更新模式还是创建模式都没有关系。当我提交表单时，我也会发送这个数组。

唯一的区别是，如果我添加了新图像，我会调用dropzone.processQueue()，否则我会调用$.post()。在这两种情况下，我都将order 数组与其他表单数据一起发送。

服务器：如果添加了新图像，我会从 $_FILES 数组中获取它们。无论如何，我都从order post 参数中获得了订单。

我不会删除此问题，希望它对将来的任何人有所帮助。如有任何问题，请提出。