Question

我在Javascript中使用Fetch API将大文件上传到服务器。 Fetch API中是否有任何可用于跟踪上传进度的事件？

Answer 1

不可能。原因是Fetch API的工作方式。

fetch方法返回Promise; Promise API使用then方法，您可以附加“成功”和“失败”回调。因此，您可以获得进度。

不过，不要失去希望！有一种解决方法可以解决这个问题（我在Fetch API的github存储库中找到了它）：

您可以将请求转换为流请求，然后当响应返回只是文件内容的一个小数据时。那么你需要收集所有数据，并在结束时将其解码为你想要的文件

function consume(stream, total = 0) {
  while (stream.state === "readable") {
    var data = stream.read()
    total += data.byteLength;
    console.log("received " + data.byteLength + " bytes (" + total + " bytes in total).")
  }
  if (stream.state === "waiting") {
    stream.ready.then(() => consume(stream, total))
  }
  return stream.closed
}
fetch("/music/pk/altes-kamuffel.flac")
  .then(res => consume(res.body))
  .then(() => console.log("consumed the entire body without keeping the whole thing in memory!"))
  .catch((e) => console.error("something went wrong", e))

使用Javascript中的Fetch API上传文件并显示进度

1 个答案: