XMLHttpRequest事件onProgress僅在文件完成上傳時才被觸發

我有以下AJAX代碼，腳本將文件正確上傳到服務器（節點快車）。我是一個面臨的問題是，只有當總字節被下載（所以在文件上傳結束時）而不是在其進程中時，纔會觸發onProgress。XMLHttpRequest事件onProgress僅在文件完成上傳時才被觸發

目前我無法在客戶端顯示文件上傳進度的一些UI。

我想知道這個問題是否與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-

來源

2017-04-11 Radex

將您的上傳事件處理程序附加到XMLHttpRequest.upload。

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

xhr.upload處理上傳數據的事件。在處理響應下載的進度之前，你有什麼。
所有其他處理程序應保持不變。

來源

2017-04-11 12:22:44 Musa

非常感謝它的作品，...但請你給我一個簡短的解釋？我是否應該將xhr.upload更改爲所有事件？ – Radex

你是否在線或者你的機器上測試它？如果您在本地測試此代碼，並且您正在上傳一個相當小的文件（似乎您正在上傳大約5MB的視頻文件），則無法看到任何進度，因爲上傳所需的時間與在您的系統上完成簡單的複製/粘貼操作。

嘗試上傳更大的文件或在線嘗試，您的代碼似乎是正確的。

來源

2017-04-11 12:12:09 Danny

我在本地環境中使用了一個大文件。服務器也在localhost上，我正在Chrome DevTools中使用Throttling Network。可能是這個問題？ – Radex

也許節流不按預期工作？或者，也許你正在使用高帶寬配置文件 – Danny

XMLHttpRequest事件onProgress僅在文件完成上傳時才被觸發

回答

相關問題