在一个请求中上传多个文件 Dropzone 发送两个请求

Posted 2023-03-22

【中文标题】在一个请求中上传多个文件 Dropzone 发送两个请求

【英文标题】：upload multiple files in one request Dropzone sending two requests

【发布时间】：2015-03-17 07:15:26

【问题描述】：

我正在尝试使用 DropZone js 在一个请求中发送多个文件。

这是我的代码：

Dropzone.autoDiscover = false;

var myDropzone = new Dropzone('#upload-Invoices',        
    paramName: "files", 
    maxFilesize: 3.0, 
    maxFiles: 4,
    parallelUploads: 10000,
    uploadMultiple: true,
    autoProcessQueue: false
);

$('#btnUpload').on('click', function () 
    myDropzone.processQueue();
);

控制器：

public void FileUpload( IEnumerable<HttpPostedFileBase> file )

    // Do Something

查看：

<form action="/Index/FileUpload"
      class="dropzone"
      id="upload-Invoices" data-ajax-method="POST" data-ajax="true">
    <input type="submit" value="Upload File to Server" id="btnUpload">
</form>

虽然在不同的请求中正在接收文件，但我想在一个请求中发送所有文件，Dropzone 页面有一个选项，尽管它不起作用。 提前致谢

【参考方案1】：

你可以使用uploadMultiple属性默认值false改成true

$(".dropzone").dropzone(
            // autoQueue:false,
            parallelUploads:10,
            uploadMultiple:true,

https://www.dropzonejs.com/#config-uploadMultiple

【讨论】：

“你可以使用uploadMultiple属性”...问题中的示例代码已经有uploadMultiple: true。

【参考方案2】：

问题是我正在使用输入 type="submit"，它会自行发布另一篇文章，将其更改为输入 button 有效。

【讨论】：

奇怪我有完全相同的问题，但输入 type=button 并没有为我解决这个问题。我必须添加 parallelUploads: 10 才能让它工作，因为 paralledUploads 默认只有 2 个文件。

【参考方案3】：

遇到同样的问题，只需将 autoDiscover: false，添加到您的 dropzone 选项，它应该可以工作！

我的选择是这样的：

Dropzone.options.UploadZone =         
    addRemoveLinks: true,
    autoDiscover: false,
    uploadMultiple: true,
    parallelUploads: 10,
    maxFiles: 10,
    acceptedFiles: ".jpeg,.jpg,.png",
    autoProcessQueue: false,
    ...

使用 autoProcessQueue: false 和 uploadMultiple: true: 对于每 2 个文件，我都会收到一个请求。

然后我添加了 parallelUploads: 10 和 maxFiles: 10，我不知道为什么，但我的前 2 个文件在我将它们放在 dropzone 上后立即开始上传，即使使用 autoProcessQueue: false。

然后我只添加 autoDiscover: false 并且一切正常！

好看！

【参考方案4】：

我还看到一次发送 2 个文件的多个 POST（例如，总共 4 个文件的 2 个单独的 POST）。

我找到了解决方案here：增加parallelUploads。我现在通过以下方式创建 dropzone：

var myDropzone = new Dropzone('div#dz', 
  url: 'http://httpbin.org/post',
  uploadMultiple: true,
  parallelUploads: 10
);

【讨论】：

设置maxFiles: 10 可能也不错，这样用户就不会超出您的并行限制并触发另一个 HTTP 请求。

【参考方案5】：

enqueueForUpload 属性已弃用，您应该改用autoProcessQueue。我的预感是，由于不再使用enqueueForUpload 并且您没有将autoProcessQueue 设置为false，DropZone.js 假定您要发送每个文件，因为它被放置在组件上。

您应该删除enqueueForUpload: false，设置autoProcessQueue: false，并在选择（即删除）您需要上传的所有文件后，调用.processQueue() 函数，如documentation 中所述。

【讨论】：

这真的很奇怪。抱歉，我没有更多的想法。

但是，一个帖子中有文件，第二个请求没有。

您也在发布表格吗？我不是 DropZone.js 专家，但可能是 processQueue() 函数发布了表单。还有一件事，如果你在表单上设置enctype="multipart/form-data"会发生什么？

它是某种类型的编码，在处理上传时是必需的

这是在 ASP.MVC 中上传文件的标准方式。这就是为什么我问你是否尝试设置正确的enctype。

【参考方案6】：

我可以看到这是很老的帖子，但是，我会回答希望它可能对某人有所帮助。

2 个请求

选项 - 无文件 POST - 带文件

Chrome 会执行 pre-flight request(OPTIONS) 来查找 CORS 标头。这是几乎所有最新浏览器都遵循的标准。