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

参见英文答案 > Upload progress indicators for fetch?                                    8个
我在Javascript中使用Fetch API将大文件上传到服务器. Fetch API中是否有可用于跟踪上传进度的事件？

解决方法:

这是不可能的.原因是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))

标签：fetch-api,javascript,upload
来源： https://codeday.me/bug/20191004/1853157.html