XMLHttpRequestUpload loadend 事件会立即触发，无论 React 中的实际上传过程如何

Question

当我在我的 React 应用程序中调用此函数（在 try...catch 块中等待它）时，立即触发 onloadend 和 onprogress 事件，尽管实际的上传过程需要一些时间（我在网络选项卡中监视它）以及进度事件立即触发，显示 100% 加载。

const uploadData = (method, url, data) => {
      const formData = new FormData();
      formData.append('file', data )
      let xhr = new XMLHttpRequest();
      xhr.open(method, url);
      xhr.upload.onprogress = (e) => console.log(`Uploaded:${e.loaded} of ${e.total}`);
      xhr.upload.onloadend = (e) => console.log('finished');
      return new Promise((resolve, reject) => {
        xhr.onload = () => {
          if (xhr.status >= 200 && xhr.status < 300) {
            resolve(xhr.response);
          } else {
            reject({
              status: xhr.status,
              statusText: xhr.statusText,
            });
          }
        };
        xhr.onerror = () => {
          reject({
            status: xhr.status,
            statusText: xhr.statusText,
          });
        };
        xhr.send(formData)
      });
    };

我尝试过使用大文件来逐步进步，但没有什么区别。 我还尝试在远程服务器上运行构建的应用程序发送到另一个远程端点，但没有区别。 顺便说一句，onload 工作正常，并在请求成功时解决

Answer 1

在另一个系统上进行测试后，我确定问题源于卡巴斯基反病毒应用程序。应用程序的网络反病毒组件与启用的“将脚本注入网络流量以与网页交互”选项相结合，导致过早触发进度和加载事件。我相信防病毒应用程序在流量处理期间代理数据，导致 xhr 请求在数据加载到代理服务器而不是实际服务器时触发这些事件。