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

Question

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

Answer 1

これはではなく、です。理由は、Fetch APIの仕組みです。

fetchメソッドはPromiseを返します。 Promise APIはthenメソッドを使用して、「成功」コールバックと「失敗」コールバックを付加できます。したがって、進捗状況にアクセスすることができます。

まだ、希望を失ってはいけません！ （私はgithubフェッチAPIのリポジトリでそれを見つけました）：

あなたはストリームリクエストにリクエストを変換してから、レスポンスリターンがファイルの内容のちょうどビットアレーであるときに対応しています。そして、あなたは、すべてのデータを収集する必要があり、その最後をファイルにそれをデコードするとき、あなたが欲しい

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