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

Question

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

Answer 1

这不可能。原因在于 Fetch API 的工作方式。

fetch 方法 return 是一个 Promise； Promise API 使用 then 方法，您可以将“成功”和“失败”回调附加到该方法。因此，您可以获得进度。

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

您可以将请求转换为流请求，然后当响应 return 只是文件内容的位数组时。然后您需要收集所有数据，并在其结束时将其解码为您想要的文件

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))

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

Upload file with Fetch API in Javascript and show progress

javascript

upload

fetch-api