web-dev-qa-db-ja.com

JavaScriptでFetch APIを使用してファイルをアップロードし、進行状況を表示する

JavaScriptで Fetch API を使用して、大きなファイルをサーバーにアップロードしています。アップロードの進行状況を追跡するために使用できるFetch APIのイベントはありますか？

javascriptuploadfetch-api
12
Drag0

これは[〜＃〜]できない[〜＃〜]可能です。その理由は、Fetch APIの動作方法です。

fetchメソッドはPromiseを返します。 Promise APIはthenメソッドを使用して、「成功」および「失敗」コールバックをアタッチできます。したがって、進行状況にアクセスできます。

それでも、希望を失わないでください！トリックを行うことができる回避策があります（私はそれをFetch APIの github リポジトリで見つけました）：

リクエストをストリームリクエストに変換し、レスポンスがファイルコンテンツのbitarrayのみの場合は、次に、すべてのデータを収集する必要があります。最後に、必要なファイルにデコードします。

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