掌握Fetch请求文件上传进度：三种实用方法

原生Fetch API虽然方便，但缺乏直接追踪上传进度的功能。别担心，本文将介绍三种有效方法，助您实时监控文件上传进度。

方法一：借助XHR库

利用axios或fetch-polyfill等XHR库，您可以轻松获取progressevent对象，从而监听上传进度：

<code class="javascript">axios.post('/upload', formdata, {
  onuploadprogress: (progressevent) => {
    const progress = Math.round((progressevent.loaded / progressevent.total) * 100);
    console.log(`上传进度：${progress}%`);
  }
});</code>

方法二：EventTarget事件监听

EventTarget接口的addEventListener()方法同样可以监听上传事件：

<code class="javascript">const xhr = new XMLHttpRequest();

xhr.addEventListener('loadstart', () => {
  console.log('开始上传');
});

xhr.addEventListener('progress', (progressevent) => {
  const progress = Math.round((progressevent.loaded / progressevent.total) * 100);
  console.log(`上传进度：${progress}%`);
});

xhr.addEventListener('loadend', () => {
  console.log('上传结束');
});

xhr.open('POST', '/upload');
xhr.send(formdata);</code>

方法三：高效的分片上传

对于大型文件，分片上传是最佳选择。将文件分割成小块，分别上传并跟踪每个块的进度：

<code class="javascript">const chunkSize = 5 * 1024 * 1024; // 5 MB

const chunks = [];

// ... (此处省略文件分割代码) ...

//  循环上传每个分片，并分别监听进度</code>

通过以上三种方法，您可以根据实际需求选择合适的方案，有效追踪Fetch请求的文件上传进度，为用户提供更佳的体验。 记住，对于大型文件，分片上传策略能够显著提升效率和用户体验。