XMLHttpRequest事件onProgress仅在文件完成上载时被触发

我有以下AJAX代码，脚本将文件正确地上传到服务器（节点快递）。 我面临的问题是，只有当总字节被下载（所以在file upload结束时），而不是在进程中，onProgress才被触发。

目前我无法在客户端显示file upload进度的一些界面。

我想知道这个问题是否与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

你在网上还是在你的机器上testing它？ 如果您在本地testing此代码，并且您正在上传一个相当小的文件（似乎您正在上传大约5MB的video文件），则无法看到任何进度，因为上传所需的时间与简单复制/粘贴操作在您的系统上完成。

尝试上传更大的文件或尝试在线，您的代码似乎是正确的。