フェッチの進行状況インジケーターをアップロードしますか？

ドキュメントまたはfetchを使用してアップロードの進行状況インジケーターを実装する例を見つけるのに苦労しています。

これは私がこれまでに見つけた唯一のリファレンスであり、次のように述べています。

進行状況イベントは、現時点ではフェッチで到着しない高レベルの機能です。Content-Lengthヘッダーを確認し、パススルーストリームを使用して受信したバイトを監視することにより、独自のものを作成できます。

つまり、Content-Length別の方法なしで明示的に応答を処理できます。そしてもちろん、たとえそれContent-Lengthがあったとしても、それは嘘になる可能性があります。ストリームを使用すると、これらの嘘を好きなように処理できます。

送信された「バイトを監視するためのパススルーストリーム」をどのように記述しますか？それが何らかの違いを生む場合、私はこれを行って、ブラウザからCloudinaryへの画像アップロードを強化しようとしています。

注：私はCloudinary JSライブラリには興味がありません。これは、jQueryに依存しており、私のアプリはそうではないためです。私は、ネイティブJavaScriptとGithubのポリフィルでこれを行うために必要なストリーム処理にのみ興味があります。fetch

https://fetch.spec.whatwg.org/#fetch-api

ストリームはWebプラットフォーム（https://jakearchibald.com/2016/streams-ftw/）に着陸し始めていますが、まだ初期の段階です。

すぐにリクエストの本文としてストリームを提供できるようになりますが、未解決の問題は、そのストリームの消費がアップロードされたバイトに関連しているかどうかです。

特定のリダイレクトにより、データが新しい場所に再送信される可能性がありますが、ストリームは「再開」できません。ボディを複数回コールできるコールバックに変えることでこれを修正できますが、JSがプラットフォーム上で初めてになる可能性があるため、リダイレクトの数を公開することがセキュリティリークではないことを確認する必要があります。それを検出します。

一部の人は、ストリームの消費をアップロードされたバイトにリンクすることが理にかなっているのではないかと疑っています。

簡単に言えば、これはまだ不可能ですが、将来的にはストリーム、またはに渡されるある種の高レベルのコールバックのいずれかによって処理されますfetch()。

私の解決策はこれをかなりうまくサポートするaxiosを使うことです：

      axios.request( {
        method: "post", 
        url: "/aaa", 
        data: myData, 
        onUploadProgress: (p) => {
          console.log(p); 
          //this.setState({
            //fileprogress: p.loaded / p.total
          //})
        }


      }).then (data => {
        //this.setState({
          //fileprogress: 1.0,
        //})
      })

これをGitHubのReactで使用する例があります。

それは可能ではないと思います。草案は述べています：

進行を要求することになると、現在（XHRと比較して）不足しています

（古い答え）：Fetch APIの章
の最初の例は、次の方法に関する洞察を提供します。

本文データを段階的に受け取りたい場合：

function consume(reader) {
  var total = 0
  return new Promise((resolve, reject) => {
    function pump() {
      reader.read().then(({done, value}) => {
        if (done) {
          resolve()
          return
        }
        total += value.byteLength
        log(`received ${value.byteLength} bytes (${total} bytes in total)`)
        pump()
      }).catch(reject)
    }
    pump()
  })
}

fetch("/music/pk/altes-kamuffel.flac")
  .then(res => consume(res.body.getReader()))
  .then(() => log("consumed the entire body without keeping the whole thing in memory!"))
  .catch(e => log("something went wrong: " + e))

Promiseコンストラクターのアンチパターンを使用することとは別に、それresponse.bodyはリーダーを使用してバイト単位で読み取ることができるストリームであり、イベントを起動したり、それらのすべてに対して好きなことを実行したりできます（進行状況のログなど）。

ただし、Streamsの仕様はまだ完成していないようで、これがフェッチの実装で既に機能しているかどうかはわかりません。

更新：受け入れられた答えが今は不可能だと言っているように。しかし、以下のコードはしばらくの間私たちの問題を処理しました。少なくとも、XMLHttpRequestに基づくライブラリを使用するように切り替える必要があったことを付け加えておきます。

const response = await fetch(url);
const total = Number(response.headers.get('content-length'));

const reader = response.body.getReader();
let bytesReceived = 0;
while (true) {
    const result = await reader.read();
    if (result.done) {
        console.log('Fetch complete');
        break;
    }
    bytesReceived += result.value.length;
    console.log('Received', bytesReceived, 'bytes of data so far');
}

このリンクのおかげで：https : //jakearchibald.com/2016/streams-ftw/

答えはどれも問題を解決しないので。

実装のためだけに、既知のサイズの小さな初期チャンクでアップロード速度を検出できます。アップロード時間は、content-length / upload-speedで計算できます。この時間は推定として使用できます。

考えられる回避策は、new Request()コンストラクタを利用してからRequest.bodyUsed Boolean属性を確認することです

bodyUsed属性のゲッターがあればtrueを返す必要がありdisturbedそうでない場合は、偽。

ストリームが distributed

Bodyミックスインを実装するオブジェクトは、disturbedif bodyがnullではなく、streamisであるといいdisturbedます。

がと等しいときに、チェーンfetch() Promise内から.then()チェーンの再帰.read()呼び出しに戻ります。ReadableStreamRequest.bodyUsedtrue

Request.bodyバイトがエンドポイントにストリーミングされるため、アプローチはのバイトを読み取らないことに注意してください。また、応答が完全にブラウザに返される前に、アップロードが完了する可能性があります。

const [input, progress, label] = [
  document.querySelector("input")
  , document.querySelector("progress")
  , document.querySelector("label")
];

const url = "/path/to/server/";

input.onmousedown = () => {
  label.innerHTML = "";
  progress.value = "0"
};

input.onchange = (event) => {

  const file = event.target.files[0];
  const filename = file.name;
  progress.max = file.size;

  const request = new Request(url, {
    method: "POST",
    body: file,
    cache: "no-store"
  });

  const upload = settings => fetch(settings);

  const uploadProgress = new ReadableStream({
    start(controller) {
        console.log("starting upload, request.bodyUsed:", request.bodyUsed);
        controller.enqueue(request.bodyUsed);
    },
    pull(controller) {
      if (request.bodyUsed) {
        controller.close();
      }
      controller.enqueue(request.bodyUsed);
      console.log("pull, request.bodyUsed:", request.bodyUsed);
    },
    cancel(reason) {
      console.log(reason);
    }
  });

  const [fileUpload, reader] = [
    upload(request)
    .catch(e => {
      reader.cancel();
      throw e
    })
    , uploadProgress.getReader()
  ];

  const processUploadRequest = ({value, done}) => {
    if (value || done) {
      console.log("upload complete, request.bodyUsed:", request.bodyUsed);
      // set `progress.value` to `progress.max` here 
      // if not awaiting server response
      // progress.value = progress.max;
      return reader.closed.then(() => fileUpload);
    }
    console.log("upload progress:", value);
    progress.value = +progress.value + 1;
    return reader.read().then(result => processUploadRequest(result));
  };

  reader.read().then(({value, done}) => processUploadRequest({value,done}))
  .then(response => response.text())
  .then(text => {
    console.log("response:", text);
    progress.value = progress.max;
    input.value = "";
  })
  .catch(err => console.log("upload error:", err));

}

const req = await fetch('./foo.json');
const total = Number(req.headers.get('content-length'));
let loaded = 0;
for await(const {length} of req.body.getReader()) {
  loaded = += length;
  const progress = ((loaded / total) * 100).toFixed(2); // toFixed(2) means two digits after floating point
  console.log(`${progress}%`); // or yourDiv.textContent = `${progress}%`;
}

キー部分があるReadableStream « obj_response .body»。

サンプル：

let parse=_/*result*/=>{
  console.log(_)
  //...
  return /*cont?*/_.value?true:false
}

fetch('').
then(_=>( a/*!*/=_.body.getReader(), b/*!*/=z=>a.read().then(parse).then(_=>(_?b:z=>z)()), b() ))

巨大なページ（https://html.spec.whatwg.org/やhttps://html.spec.whatwg.org/print.pdfなど）での実行をテストできます。CtrlShiftJとコードをロードします。

（Chromeでテスト済み。）