web-dev-qa-db-ja.com

fetch（）およびWhatWGストリームでファイルのアップロードの進捗状況を取得する方法

注：代替手段は探していません。これはXMLHttpRequestで実行できることを知っています。ブラウザのサポートについても気にしません。新しい/今後の標準について知りたいだけです。

私は File オブジェクトを持っており、次のようにフェッチを使用してPUTでアップロードできます：

fetch(url, {
    method: "PUT",
    body: fileObject,
});

これからアップロードの進捗状況を取得するにはどうすればよいですか？

私が理解していることから、フェッチオプションのbodyは ReadableStream になります。では、FileオブジェクトをReadableStreamにラップして、そこから進行状況を取得する方法はあるのでしょうか。

例えば。このようなもの

fetch(url, {
    method: "PUT",
    body: asReadableStream(fileObject, onProgress),
});

ありがとう。

javascriptfetch-apiwhatwg-streams-api
13
Epeli

カイルが言ったように、ReadableStreamのアップロードはまだサポートされていません。 https://github.com/whatwg/fetch/issues/95

可能な場合でも、ストリーム全体のアップロードの進行状況を監視しようとはしません（つまり、 FetchObserver が問題になった場合）現在、誰も作業していません。しかし、Mozillaは次のような提案をしました。

/*
enum FetchState {
  // Pending states
  "requesting", "responding",

  // Final states
  "aborted", "errored", "complete"
};
*/

fetch(url, {
  observe(observer) { 
    observer.onresponseprogress = e => console.log(e);
    observer.onrequestprogress = e => console.log(e);
    observer.onstatechange = n => console.log(observer.state)
  }
)

私はずっと前にいくつかの実験的フラグを使用してそれをテストしたことを覚えていますが、デモを見つけることができません。独自の実装/提案があったため、彼らはそれをMDNから削除したと思います。

7
Endless

短い答え：今はできません。

ここで仕様を確認してください： https://fetch.spec.whatwg.org/#fetch-api

2番目の文は、フェッチの使用時にrequestの進行状況を追跡する方法がないことを示しています。

Fetch（）メソッドは、リソースをフェッチするための比較的低レベルのAPIです。それはXMLHttpRequestよりもわずかに広い範囲をカバーしていますが、リクエストの進行（応答の進行ではない）に関しては現在欠けています。

2
Kyle