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仅在文件完成上传时才被触发

回答

相关问题