仅当文件完成上传时才会触发 XMLHttpRequest 事件 onProgress答案

【问题标题】：XMLHttpRequest event onProgress is being fired only when file has finished upload仅当文件完成上传时才会触发 XMLHttpRequest 事件 onProgress
【发布时间】：2017-09-06 19:14:50
【问题描述】：

我有以下 AJAX 代码，脚本将文件正确上传到服务器（节点快递）。我面临的问题是 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-

【问题讨论】：

标签： javascript jquery node.js ajax xmlhttprequest

【解决方案1】：

您是在线测试还是在您的机器上测试？如果您在本地测试此代码并且您正在上传一个相当小的文件（似乎您正在上传一个 ~5MB 的视频文件），您将看不到任何进度，因为上传它所花费的时间与一个简单的在您的系统上完成复制/粘贴操作。

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

【讨论】：

我在本地环境中使用了一个大文件。服务器也在本地主机上，我在 Chrome DevTools 中使用限制网络。可能是这个问题吗？
也许节流没有按预期工作？或者，也许您正在使用高带宽配置文件

【解决方案2】：

将您的上传事件处理程序附加到XMLHttpRequest.upload。

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

xhr.upload 处理上传数据的事件。您之前处理的响应下载进度。
所有其他处理程序应保持不变。

【讨论】：

非常感谢它的工作原理，...但是你能不能给我一个简短的解释？我应该更改为 xhr.upload 到所有事件吗？