XMLHttpRequestイベントonProgressは、ファイルのアップロードが完了したときにのみ起動されます。

Question

次のAJAXコードがあります。スクリプトはファイルをサーバーに正しくアップロードします（ノードエクスプレス）。 私が直面している問題は、進行中ではなく、合計バイトがダウンロードされたとき（ファイルのアップロードの最後に）にのみonProgressが起動されることです。

現在、クライアントでファイルのアップロードの進行状況を表示できません。

この問題がAJAX呼び出しに関連しているか、サーバーに関連している可能性があるかどうかを知りたいと思います。

  var formData = new FormData(); 
      var xhr = new XMLHttpRequest(); 

      var onProgress = function (e) { 
       if (e.lengthComputable) { 
        var percentComplete = (e.loaded/e.total) * 100; 
        console.log(percentComplete); 
       } 
      }; 

      var onLoad = function (event) { 
       var reponse = JSON.parse(xhr.responseText); 
       this._logicAddWdg(reponse); 
      }.bind(this); 

      var onError = function (err) { 
       console.log(onError); 
      }; 

      formData.append('file', this._uploaderFile); 
      xhr.addEventListener('error', onError, false); 
      xhr.addEventListener('progress', onProgress, false); 
      xhr.addEventListener('load', onLoad, false); 
      xhr.open('post', '/uploads', true); 
      xhr.send(formData); 

サーバーヘッダの応答：

Accept-Ranges:bytes 
Cache-Control:public, max-age=0 
Connection:keep-alive 
Content-Length:5510872 
Content-Range:bytes 0-5510871/5510872 
Content-Type:video/mp4 
Date:Tue, 11 Apr 2017 12:02:20 GMT 
ETag:W/"5416d8-15b5ce4a545" 
Last-Modified:Tue, 11 Apr 2017 12:02:20 GMT 
X-Powered-By:Express 
Request Headers 
view source 
Accept:*/* 
Accept-Encoding:identity;q=1, *;q=0 
Accept-Language:en-US,en;q=0.8 
Cache-Control:no-cache 
Connection:keep-alive 
Host:localhost:8080 
Pragma:no-cache 
Range:bytes=0- 

Answer 1

アップロードイベントハンドラをXMLHttpRequest.uploadに添付します。

xhr.upload.addEventListener('progress', onProgress, false); 

xhr.uploadは、アップロードされたデータのイベントを処理します。あなたが応答のダウンロードの進行を処理する前に持っていたもの。
他のすべてのハンドラは同じままにしてください。

Answer 2

あなたは、オンラインまたはあなたのマシン上でそれをテストしていますか？ このコードをローカルでテストしていて、かなり小さいファイルをアップロードしている場合（約5MBのビデオファイルをアップロードしているようです）、アップロードにかかる時間があなたのシステムで行われた簡単なコピー/ペースト操作。

大きなファイルをアップロードするか、オンラインで試してみてください。コードが正しいようです。