如何使用XMLHttpRequest监听fetch请求的上传进度？

利用XMLHttpRequest监控fetch请求的上传进度

Fetch API是浏览器中功能强大的HTTP请求工具，方便web应用发送和接收数据。它允许开发者精确控制上传进度，实时追踪文件上传状态。

要监控fetch请求的上传进度，请按以下步骤操作：

1. 创建XMLHttpRequest对象，并通过upload属性访问XMLHttpRequestUpload对象。
2. 为XMLHttpRequestUpload对象的progress事件添加监听器，该事件会在文件上传过程中持续触发。
3. 在事件处理函数中，读取loaded和total属性，分别代表已上传字节数和总字节数。
4. 利用loaded和total计算上传进度，并将其反馈给用户。

以下代码示例演示如何监控fetch请求的上传进度：

const xhr = new XMLHttpRequest();
const upload = xhr.upload;

upload.addEventListener("progress", function(e) {
  if (e.lengthComputable) {
    const progress = Math.round(e.loaded / e.total * 100); //取整提高精度
    // 显示上传进度 (例如: 更新进度条)
    console.log(`上传进度: ${progress}%`);
  }
});

// ...  (后续代码，需根据实际情况补充fetch请求的代码)

通过以上步骤，开发者可以轻松追踪fetch请求的上传进度，为用户提供实时的上传反馈。 注意，这段代码仅展示了进度监控部分，实际应用中需要结合fetch API完成完整的上传流程。