大文件上传 - 请求被取消答案

【问题标题】：Large file upload - Request gets cancelled大文件上传 - 请求被取消
【发布时间】：2017-11-14 16:13:56
【问题描述】：

我正在尝试上传大小为 40-50mb 的视频文件。如果我在 Google Chrome 上的“网络”选项卡中观察到，进度条会在某个点冻结。请求被取消，没有错误，HTTP 响应头为空。

但是，这适用于 10-15mb 左右的图像/视频文件。

我的代码：

Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("#my-awesome-dropzone", {
        maxFiles: 1,
        parallelUploads: 100,
        acceptedFiles: '.3gp,.3gp2,.h261,.h263,.h264,.jpgv,.jpm,.jpgm,.mp4,.mp4v,.mpg4,.mpeg,.mpg,.mpe,.m1v,.m2v,.ogv,.qt,.mov,.fli,.flv,.mks,.mkv,.wmv,.avi,.movie,.smv,.g3,.jpeg,.jpg,.jpe,.png,.btif,.sgi,.svg,.tiff,.tif',
        previewTemplate: previewTemplate,
        previewsContainer: "#previews",
        autoProcessQueue: false,
        clickable: ".fileinput-button",
    });

P.S：这不是服务器端问题，因为我尝试在没有 Dropzone 的情况下上传，一切正常。

【问题讨论】：

标签： dropzone.js

【解决方案1】：

您是否使用了 dropzone.js 版本 >= 4.4.0 和 ajax 请求？

如果是这样，您必须在配置中设置timeout（以毫秒为单位）。它为xhr（ajax）请求指定超时值，默认值只有30s。

来源：http://www.dropzonejs.com/#configuration

【讨论】：

这对于 5.1.1 也是如此，尽管文档清楚地表明它默认设置为 null - 它不是，当您在浏览器中转到控制台并输入 Dropzone.instances 和比看到选项你会看到它设置为 30000 毫秒：在此之后它取消上传，没有任何通知或消息，它只是挂起。
dropzone 4.3 怎么样？超时是在 4.4 上添加的
@guival：我认为应该有类似的选项，尽管我不确定它是否可见。也许您可以尝试深入研究 dropzone 的源代码并与我们分享您的发现。
在 5.2.0 版中，Dropzone 文档现在正确地声明了默认值 30 秒。
对于我的设置 - 打开分块实际上解决了我的超时问题

【解决方案2】：

它有一个超时，只要它超过，请求就会被取消，只是放

超时：180000，

在选项中

应该是：

Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("#my-awesome-dropzone", {
        maxFiles: 1,
        timeout: 180000,
        parallelUploads: 100,
        acceptedFiles: '.3gp,.3gp2,.h261,.h263,.h264,.jpgv,.jpm,.jpgm,.mp4,.mp4v,.mpg4,.mpeg,.mpg,.mpe,.m1v,.m2v,.ogv,.qt,.mov,.fli,.flv,.mks,.mkv,.wmv,.avi,.movie,.smv,.g3,.jpeg,.jpg,.jpe,.png,.btif,.sgi,.svg,.tiff,.tif',
        previewTemplate: previewTemplate,
        previewsContainer: "#previews",
        autoProcessQueue: false,
        clickable: ".fileinput-button",
    });

【讨论】：

【解决方案3】：

第一步是与服务器检查，因为有时 nginx 或其他服务器工具会查看文件大小的标头并拒绝超过一定大小的文件。

如果服务器工作正常，那么由于网络带宽问题。服务器现在仍然会给出一个需要客户端处理的错误。此处超时开始起作用。

Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("#my-dropzone", {
        maxFiles: 1,
        timeout: 9000, /*milliseconds*/
        autoProcessQueue: false
});

myDropzone.on("sending", function(file, xhr, formData) {
  /*Called just before each file is sent*/
        xhr.ontimeout = (() => {
          /*Execute on case of timeout only*/
            console.log('Server Timeout')
        });
}

【讨论】：