Fortschrittsanzeigen zum Abrufen hochladen?

Ich habe Probleme, Dokumentation oder Beispiele für die Implementierung einer Upload-Fortschrittsanzeige mithilfe von Fetch zu finden .

Dies ist die einzige Referenz, die ich bisher gefunden habe und die besagt:

Fortschrittsereignisse sind eine übergeordnete Funktion, die vorerst nicht abgerufen werden kann. Sie können Ihre eigenen erstellen, indem Sie sich den Content-LengthHeader ansehen und einen Pass-Through-Stream verwenden, um die empfangenen Bytes zu überwachen.

Dies bedeutet, dass Sie Antworten explizit ohne eine Content-Lengthandere behandeln können. Und selbst wenn Content-Lengthes da ist, kann es natürlich eine Lüge sein. Mit Streams können Sie mit diesen Lügen umgehen, wie Sie wollen.

Wie würde ich "einen Pass-Through-Stream zur Überwachung der gesendeten Bytes" schreiben? Wenn es einen Unterschied macht, versuche ich dies, um das Hochladen von Bildern vom Browser auf Cloudinary zu ermöglichen .

HINWEIS : Die Cloudinary JS-Bibliothek interessiert mich nicht , da sie von jQuery abhängt und meine App nicht. Ich interessiere mich nur für die Stream-Verarbeitung, die dazu mit nativem Javascript und Githubs Polyfill erforderlich ist .fetch

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

Streams landen allmählich auf der Webplattform ( https://jakearchibald.com/2016/streams-ftw/ ), aber es ist noch früh.

Bald können Sie einen Stream als Hauptteil einer Anfrage bereitstellen, aber die offene Frage ist, ob sich der Verbrauch dieses Streams auf hochgeladene Bytes bezieht.

Bestimmte Weiterleitungen können dazu führen, dass Daten erneut an den neuen Speicherort übertragen werden, Streams können jedoch nicht "neu gestartet" werden. Wir können dies beheben, indem wir den Body in einen Rückruf verwandeln, der mehrmals aufgerufen werden kann. Wir müssen jedoch sicherstellen, dass das Offenlegen der Anzahl der Weiterleitungen kein Sicherheitsleck darstellt, da dies das erste Mal auf der Plattform JS sein könnte erkenne das.

Einige fragen sich, ob es überhaupt Sinn macht, den Stream-Verbrauch mit hochgeladenen Bytes zu verknüpfen.

Lange Rede, kurzer Sinn: Dies ist noch nicht möglich, aber in Zukunft wird dies entweder durch Streams oder durch eine Art Rückruf auf höherer Ebene erledigt fetch().

Meine Lösung besteht darin, Axios zu verwenden , was dies ziemlich gut unterstützt:

      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,
        //})
      })

Ich habe ein Beispiel dafür, wie man dies auf Github reagiert .

Ich denke nicht, dass es möglich ist. Der Entwurf besagt:

es fehlt derzeit [ im Vergleich zu XHR ], wenn es um das Fortschreiten von Anfragen geht

(alte Antwort):
Das erste Beispiel im Kapitel Fetch API gibt einen Einblick in die Vorgehensweise :

Wenn Sie die Körperdaten schrittweise erhalten möchten:

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

Abgesehen von der Verwendung des PromiseKonstruktor-Antimusters können Sie sehen, dass response.bodyes sich um einen Stream handelt, aus dem Sie mit einem Reader Byte für Byte lesen können, und Sie können für jeden von ihnen ein Ereignis auslösen oder tun, was Sie möchten (z. B. den Fortschritt protokollieren).

Die Streams-Spezifikation scheint jedoch noch nicht ganz fertig zu sein, und ich habe keine Ahnung, ob dies bereits in einer Abrufimplementierung funktioniert.

Update: Wie die akzeptierte Antwort sagt, ist es jetzt unmöglich. Aber der folgende Code hat unser Problem für einige Zeit gelöst. Ich sollte hinzufügen, dass wir zumindest auf eine Bibliothek umsteigen mussten, die auf XMLHttpRequest basiert.

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');
}

Dank diesem Link: https://jakearchibald.com/2016/streams-ftw/

Da keine der Antworten das Problem löst.

Nur zur Implementierung können Sie die Upload-Geschwindigkeit mit einem kleinen Anfangsblock bekannter Größe ermitteln und die Upload-Zeit mit der Länge des Inhalts / der Upload-Geschwindigkeit berechnen. Sie können diese Zeit als Schätzung verwenden.

Eine mögliche Problemumgehung wäre, den new Request()Konstruktor zu verwenden und dann das Request.bodyUsed BooleanAttribut zu überprüfen

Der bodyUsedGetter des Attributs muss true if disturbedund andernfalls false zurückgeben.

um festzustellen, ob Stream ist distributed

Ein Objekt, das das BodyMixin implementiert, heißt disturbedif , wenn bodyes nicht null ist und es streamist disturbed.

Geben Sie den fetch() Promisevon innen .then()verketteten bis rekursiven .read()Aufruf eines ReadableStreamWann Request.bodyUsedgleich gleich zurück true.

Beachten Sie, dass der Ansatz die Bytes von nicht liest, Request.bodywenn die Bytes zum Endpunkt gestreamt werden. Außerdem kann der Upload abgeschlossen sein, bevor eine Antwort vollständig an den Browser zurückgegeben wird.

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

Schlüsselteil ist ReadableStream ≪ obj_response .body).

Stichprobe:

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

Sie können es auf einer großen Seite testen, z. B. https://html.spec.whatwg.org/ und . https://html.spec.whatwg.org/print.pdf . CtrlShiftJ und laden Sie den Code in.

(Auf Chrome getestet.)