Getirme için ilerleme göstergeleri yüklensin mi?

Getirme özelliğini kullanarak bir yükleme ilerleme göstergesi uygulamaya ilişkin belgeleri veya örnekleri bulmakta zorlanıyorum .

Şimdiye kadar bulduğum tek referans bu :

İlerleme olayları, şimdilik getirilmeyecek yüksek seviyeli bir özelliktir. Content-LengthBaşlığa bakarak ve alınan baytları izlemek için bir geçiş akışı kullanarak kendinizinkini oluşturabilirsiniz .

Bu, yanıtları Content-Lengthfarklı bir şekilde açık bir şekilde ele alabileceğiniz anlamına gelir . Ve elbette, Content-Lengthorada olsa bile bir yalan olabilir. Akarsularla bu yalanları istediğiniz gibi halledebilirsiniz.

Gönderilen "baytları izlemek için bir geçiş akışı" nasıl yazılır? Herhangi bir fark yaratırsa , bunu tarayıcıdan Cloudinary'e görüntü yüklemelerini güçlendirmek için yapmaya çalışıyorum .

NOT : Ben am değil ilgilenen Cloudinary JS kütüphanesinde o jQuery bağlıdır ve benim uygulama değil yaptığı gibi. Yalnızca yerel javascript ve Github'ın fetchçoklu dolgusu ile bunu yapmak için gereken akış işlemeyle ilgileniyorum.

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

Akışlar web platformuna girmeye başlıyor ( https://jakearchibald.com/2016/streams-ftw/ ) ancak hala erken günler.

Yakında bir isteğin gövdesi olarak bir akış sağlayabileceksiniz, ancak asıl soru, bu akışın tüketiminin yüklenen baytlarla ilgili olup olmadığıdır.

Belirli yönlendirmeler, verilerin yeni konuma yeniden iletilmesine neden olabilir, ancak akışlar "yeniden başlatılamaz". Bunu, gövdeyi birden çok kez çağrılabilen bir geri aramaya dönüştürerek düzeltebiliriz, ancak yeniden yönlendirme sayısını açığa çıkarmanın bir güvenlik sızıntısı olmadığından emin olmalıyız çünkü bu, JS platformunda ilk kez olabilirdi. bunu tespit et.

Bazıları, akış tüketimini yüklenen baytlara bağlamanın mantıklı olup olmadığını sorguluyor.

Uzun lafın kısası: Bu henüz mümkün değil, ancak gelecekte bu ya akışlarla ya da bir tür üst düzey geri aramayla iletilecek fetch().

Benim çözümüm, bunu oldukça iyi destekleyen aksiyoları kullanmak :

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

Bunu github'da react'te kullanmak için bir örneğim var.

Güncelleme: Kabul edilen yanıtın artık imkansız olduğunu söylediği gibi. ancak aşağıdaki kod bir süre sorunumuzu çözdü. En azından XMLHttpRequest'e dayalı bir kitaplık kullanmaya geçmemiz gerektiğini eklemeliyim.

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

bu bağlantı sayesinde: https://jakearchibald.com/2016/streams-ftw/

Bunun mümkün olduğunu sanmıyorum. Taslak şu şekildedir:

İlerleme isteğinde bulunulduğunda şu anda eksiktir [ XHR ile karşılaştırıldığında ]

(eski cevap): API Getirme bölümündeki
ilk örnek, aşağıdakilerin nasıl yapılacağına dair bazı bilgiler verir:

Vücut verilerini aşamalı olarak almak istiyorsanız:

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

Dışında kullanımlarını Promiseyapıcı antipattern , bunu görebiliyorum response.bodyBir Reader kullanarak bayt bayt okuyabilir hangi bir Akış olduğunu ve bir olay yangın veya benzeri her ne Onların her için (örneğin ilerleme log) yapabilirsiniz.

Ancak, Akışlar özelliği tam olarak bitmiş gibi görünmüyor ve bunun herhangi bir getirme uygulamasında zaten çalışıp çalışmadığını bilmiyorum.

Cevapların hiçbiri sorunu çözmediğinden.

Yalnızca uygulama uğruna, yükleme hızını bilinen boyutta bazı küçük başlangıç parçalarıyla tespit edebilirsiniz ve yükleme süresi içerik uzunluğu / yükleme hızı ile hesaplanabilir. Bu zamanı tahmin olarak kullanabilirsiniz.

Olası bir geçici çözüm, yapıcıyı kullanmak ve new Request()ardından Request.bodyUsed Booleanözniteliği kontrol etmektir.

bodyUsedÖzniteliğin alıcı true döndürmesi gerekir disturbedaksi takdirde ve yanlış.

akışın olup olmadığını belirlemek için distributed

BodyKarışımı uygulayan bir nesnenin disturbedeğer bodyboş olmadığı ve onun streamolduğu söylenir disturbed.

Dönüş fetch() Promiseiçinden .then()özyinelemeli zincirlenmiş .read()bir çağrısına ReadableStreamzaman Request.bodyUsedeşittir true.

Not, yaklaşım, baytlar Request.bodyuç noktaya akıtılırken baytlarını okumaz . Ayrıca, herhangi bir yanıt tarayıcıya tam olarak döndürülmeden önce yükleme tamamlanabilir.

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

Anahtar parçasıdır ReadableStream « obj_response .body».

Örneklem:

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

Bunu büyük bir sayfada çalıştırmayı test edebilirsiniz, örneğin https://html.spec.whatwg.org/ ve https://html.spec.whatwg.org/print.pdf . CtrlShiftJ ve kodu yükleyin.

(Chrome'da test edildi.)