浏览器接口 fetch 发起的请求如何跟踪上传进度?

在使用浏览器接口`fetch`发起请求时，你可以利用`ReadableStream`对象的`onprogress`事件来跟踪上传进度。`fetch`函数返回的是一个`Promise`对象，可以通过调用`response.body.getReader()`获取到`ReadableStream`，然后通过监听`onprogress`事件来获取上传进度信息。

以下是一个示例代码，演示了如何使用`fetch`和`ReadableStream`来跟踪上传进度：

function trackUploadProgress(url, file) {
  return new Promise((resolve, reject) => {
    const reader = file.stream().getReader();
    const totalSize = file.size;
    let uploadedSize = 0;

    fetch(url, {
      method: 'POST',
      body: file
    }).then(response => {
      if (!response.ok) {
        throw new Error('Upload failed');
      }
      resolve(response);
    }).catch(error => {
      reject(error);
    });

    reader.read().then(function processChunk({ done, value }) {
      if (done) {
        return;
      }

      uploadedSize += value.length;
      const progress = (uploadedSize / totalSize) * 100;
      console.log(`Upload progress: ${progress.toFixed(2)}%`);

      return reader.read().then(processChunk);
    });
  });
}

// 使用示例
const fileInput = document.getElementById('fileInput');
const uploadButton = document.getElementById('uploadButton');

uploadButton.addEventListener('click', () => {
  const file = fileInput.files[0];
  const uploadUrl = 'http://example.com/upload';

  trackUploadProgress(uploadUrl, file).then(response => {
    console.log('Upload completed:', response);
  }).catch(error => {
    console.error('Upload failed:', error);
  });
});

在上面的示例中，`trackUploadProgress`函数接受一个URL和一个文件对象，并返回一个Promise对象。在函数内部，我们首先获取到文件的`ReadableStream`对象，并记录上传文件的总大小`totalSize`。然后，通过`fetch`函数发起POST请求并上传文件。在`reader.read().then()`的回调函数中，我们按块读取文件的内容，累计已上传的大小`uploadedSize`并计算上传进度。最后，我们通过`resolve`和`reject`方法来处理Promise的结果。

你可以根据具体需求，将示例代码中的URL、文件对象以及上传完成后的处理逻辑进行修改。通过使用`ReadableStream`的`onprogress`事件，你可以实时跟踪上传进度，从而提供上传进度的反馈给用户。