如何使用Fetch API跟踪文件上传进度？-js教程-PHP中文网

如何使用Fetch API跟踪文件上传进度？

花韻仙語

发布： 2025-02-21 12:50:10

原创

425人浏览过

如何使用fetch api跟踪文件上传进度？

利用Fetch API高效监控文件上传进度

虽然Fetch API提供了便捷的网络请求方式，但其本身并不直接支持上传进度跟踪。本文将介绍一种巧妙的方法，利用Fetch API的特性实现上传进度监控。

解决方案：巧用AbortController

关键在于Fetch API允许使用AbortController对象来控制请求。通过监听该对象的状态变化，我们可以间接地获取上传进度。

万物追踪

AI 追踪任何你关心的信息

查看详情

具体步骤如下：

创建AbortController和Signal对象:

<code class="javascript">const controller = new AbortController();
const signal = controller.signal;</code>

登录后复制

将Signal对象传入Fetch请求:

<code class="javascript">const request = new Request('upload-url');
fetch(request, { signal });</code>

登录后复制

监控上传进度 (简化版): 由于request.bodyUsed属性只能指示请求体是否已完全使用，无法精确跟踪进度。实际应用中，需要结合XMLHttpRequest或其他方式来精确监控进度。以下是一个简化版，仅用于演示原理：

<code class="javascript">const trackProgress = () => {
  if (request.bodyUsed) {
    console.log('上传完成');
  } else {
    setTimeout(trackProgress, 100); // 定期检查
  }
};

trackProgress();</code>

登录后复制

取消上传:

<code class="javascript">controller.abort();</code>

登录后复制

处理响应和错误:

<code class="javascript">fetch(request, { signal })
  .then(response => {
    // 处理成功响应
  })
  .catch(error => {
    // 处理错误
    if (error.name === 'AbortError') {
      console.log('上传已取消');
    }
  });</code>

登录后复制

注意: 上述第三步的trackProgress函数是一个简化示例，实际应用中需要更精细的进度监控机制，例如使用XMLHttpRequest的upload事件监听器来获取更准确的上传进度信息。本示例仅说明如何利用AbortController来配合Fetch API进行进度监控的基本原理。通过结合更完善的进度监控方法，您可以轻松掌握Fetch API中的文件上传进度跟踪技术。

以上就是如何使用Fetch API跟踪文件上传进度？的详细内容，更多请关注php中文网其它相关文章！