Загрузить индикаторы прогресса для fetch?

Я не думаю, что это возможно. В проекте говорится:

В настоящее время отсутствует [по сравнению с 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 - это поток, из которого вы можете читать байт за байтом с помощью считывателя, и вы можете запустить событие или сделать все, что хотите (например, зарегистрировать прогресс) для каждого из них.

возможным обходным путем было бы использовать new Request() конструктор после проверки Request.bodyUsed Boolean атрибут

на bodyUsed геттер атрибута должен возвращать true, если disturbed, и false в противном случае.

чтобы определить, является ли поток distributed

объект, реализующий Body миксин считается disturbed если body не-null и stream и disturbed.

вернуть fetch() Promise внутри .then() прикован к рекурсивной .read() вызов ReadableStream, когда Request.bodyUsed равна true.

обратите внимание, что подход не считывает байты 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));

}

поскольку ни один из ответов решить проблему.

просто для реализации, вы можете обнаружить скорость загрузки С небольшим начальным куском известного размера и время загрузки можно рассчитать с помощью content-length / upload-speed. Вы можете использовать это время как оценка.

мое решение-использовать 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,
        //})
      })

У меня есть пример для использования этого в react on github.

основная часть составляет ReadableStream ≪obj_response.тело≫.

пример:

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

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}%`;
}