是否可以使用 dropzone.js 获取文件上传的文件夹名称

Question

我使用 dropzone.js 作为我的烧瓶应用程序的一部分，用户可以同时上传多个文件夹。但有时关于文件最有价值的信息是文件夹名称。

一个例子可以是：

文件夹 A

• sample.txt
• img.png

文件夹 B

• sample.txt
• img.png

是否可以在此处注册哪些文件来自文件夹 A，哪些来自文件夹 B，假设他们将整个文件夹拖放到 dropzone 中？

Answer 1

在this answer 和 MDN 在Using FormData objects 上的文章的帮助下，我想出了如何做到这一点。

如果你在模板中这样定义你的 dropzone：

Dropzone.autoDiscover = false;
  var myDropzone = new Dropzone("form#my-awesome-dropzone",
    { url: "/upload",
});

然后您必须为sending 事件添加一个事件处理程序，该事件处理程序接受file.fullPath 字符串，并将其添加到成为multipart/form-data 提交的一部分的blob。

myDropzone.on("sending", function(file, xhr, formData) {
  // get the original fullPath and add it to the multipart form.
  var blob = new Blob([file.fullPath], { type: "text/plain"});
  formData.append("originalPath", blob);
});

请注意，这实质上会在您的表单提交中添加一个名为 blob 的第二个文件，该文件的 mimetype 为 text/plain。为了可视化这一点，在 Flask 服务器上的上传路由中，您可以 print(request.files) 给出：

ImmutableMultiDict(
    [('originalPath', <FileStorage: 'blob' ('text/plain')>),
     ('file', <FileStorage: 'up.txt' ('text/plain')>)
    ])

所以要从服务器端提取实际的字符串，你可以这样做：

original_path = request.files['originalPath'].read().decode('utf-8')

请注意，从前端的角度来看，dropzone 不知道相对于被删除的文件或文件夹的父文件夹，所以：

• 将名为 up.txt 的文件拖放到 Dropzone 中，original_path 将是 'undefined'。
• 将包含名为up.txt 的文件的名为untitled folder 的文件夹拖放到Dropzone 中，original_path 将是'untitled folder/up.txt'。

您应该在后端构建一些功能来验证传入的信息，并相应地解析这些字符串。