web-dev-qa-db-ja.com

大容量ファイルのアップロード-リクエストはキャンセルされます

サイズが40〜50 MBの動画ファイルをアップロードしようとしています。 Google Chromeの[ネットワーク]タブで確認すると、特定の時点で進行状況バーがフリーズします。要求はキャンセルされ、エラーはなく、HTTP応答ヘッダーは空です。

ただし、これは約10〜15 MBのイメージ/ビデオファイルの両方で機能します。

私のコード：

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",
    });

追伸：Dropzoneを使用せずにアップロードしようとしたため、サーバー側の問題ではなく、すべてがスムーズに機能します。

dropzone.js
20
Daniyal Arshad

Dropzone.jsバージョン> = 4.4.0およびajaxリクエストを使用しましたか？

その場合、構成でtimeout（ミリ秒単位）を設定する必要があります。 xhr（ajax）要求のタイムアウト値を指定し、デフォルト値は30秒​​のみです。

ソース： http://www.dropzonejs.com/#configuration

28
yahyaman

最初のステップは、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')
        });
}
10
Jagatula

タイムアウトがあり、それを超えるとリクエストはキャンセルされます。

タイムアウト：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",
    });
6
Rodrigo Laisequilla Ramos