Unggah indikator kemajuan untuk diambil?

Saya kesulitan menemukan dokumentasi atau contoh penerapan indikator kemajuan upload menggunakan fetch .

Ini adalah satu-satunya referensi yang saya temukan sejauh ini , yang menyatakan:

Peristiwa kemajuan adalah fitur tingkat tinggi yang tidak akan datang untuk saat ini. Anda dapat membuatnya sendiri dengan melihat Content-Lengthheader dan menggunakan aliran pass-through untuk memantau byte yang diterima.

Ini berarti Anda dapat menangani respons secara eksplisit tanpa Content-Lengthperbedaan. Dan tentu saja, bahkan jika Content-Lengthada itu bisa menjadi kebohongan. Dengan aliran Anda dapat menangani kebohongan ini sesuka Anda.

Bagaimana saya menulis "aliran pass-through untuk memantau byte" yang dikirim? Jika ada perbedaan, saya mencoba melakukan ini untuk mendukung unggahan gambar dari browser ke Cloudinary .

CATATAN : Saya tidak tertarik dengan pustaka Cloudinary JS , karena bergantung pada jQuery dan aplikasi saya tidak. Saya hanya tertarik pada pemrosesan streaming yang diperlukan untuk melakukan ini dengan javascript asli dan fetchpolyfill Github .

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

Aliran mulai mendarat di platform web ( https://jakearchibald.com/2016/streams-ftw/ ) tetapi ini masih awal.

Anda akan segera dapat menyediakan aliran sebagai isi permintaan, tetapi pertanyaan terbukanya adalah apakah konsumsi aliran itu terkait dengan byte yang diunggah.

Pengalihan tertentu dapat mengakibatkan data dikirim ulang ke lokasi baru, tetapi aliran tidak dapat "dimulai ulang". Kita dapat memperbaikinya dengan mengubah body menjadi callback yang dapat dipanggil berkali-kali, tetapi kita perlu memastikan bahwa mengungkapkan jumlah pengalihan bukanlah kebocoran keamanan, karena ini akan menjadi pertama kalinya di platform JS bisa deteksi itu.

Beberapa mempertanyakan apakah masuk akal untuk menautkan konsumsi aliran ke byte yang diunggah.

Singkat cerita: ini belum memungkinkan, tetapi di masa mendatang ini akan ditangani baik oleh streaming, atau semacam panggilan balik tingkat tinggi yang diteruskan ke fetch().

Solusi saya adalah menggunakan axios , yang mendukung ini dengan cukup baik:

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

Saya punya contoh untuk menggunakan ini dalam bereaksi di github.

Saya tidak berpikir itu mungkin. Draf tersebut menyatakan:

saat ini kurang [ dibandingkan dengan XHR ] dalam hal permintaan perkembangan

(jawaban lama):
Contoh pertama di bab Fetch API memberikan beberapa wawasan tentang cara:

Jika Anda ingin menerima data tubuh secara bertahap:

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

Selain dari penggunaan Promiseantipattern konstruktor , Anda dapat melihatnyaresponse.body Stream dari mana Anda dapat membaca byte demi byte menggunakan Pembaca, dan Anda dapat mengaktifkan acara atau melakukan apa pun yang Anda suka (misalnya mencatat kemajuan) untuk masing-masing.

Namun, spesifikasi Streams tampaknya belum selesai, dan saya tidak tahu apakah ini sudah berfungsi dalam implementasi pengambilan apa pun.

Pembaruan: karena jawaban yang diterima mengatakan tidak mungkin sekarang. tetapi kode di bawah ini menangani masalah kami untuk beberapa saat. Saya harus menambahkan bahwa setidaknya kita harus beralih menggunakan perpustakaan yang didasarkan pada 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');
}

berkat tautan ini: https://jakearchibald.com/2016/streams-ftw/

Karena tidak ada jawaban yang memecahkan masalah.

Demi penerapan, Anda dapat mendeteksi kecepatan unggah dengan potongan awal kecil dari ukuran yang diketahui dan waktu unggah dapat dihitung dengan panjang konten / kecepatan unggah. Anda dapat menggunakan waktu ini sebagai perkiraan.

Solusi yang mungkin adalah dengan menggunakan new Request()konstruktor lalu memeriksa Request.bodyUsed Booleanatribut

Pengambil bodyUsedatribut harus menampilkan true if disturbed, dan false jika sebaliknya.

untuk menentukan apakah aliran distributed

Objek yang mengimplementasikan Bodymixin dikatakan disturbedjika bodynon-null and its streamis disturbed.

Kembalikan fetch() Promisedari dalam .then()berantai ke .read()panggilan rekursif dari ReadableStreamsaat Request.bodyUsedsama dengantrue .

Catatan, pendekatan ini tidak membaca byte Request.bodysebagai byte dialirkan ke titik akhir. Selain itu, unggahan dapat diselesaikan dengan baik sebelum tanggapan apa pun dikembalikan sepenuhnya ke browser.

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

Bagian kuncinya adalah ReadableStream ≪ obj_response .body≫.

Sampel:

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

Anda dapat menguji menjalankannya di halaman besar misalnya https://html.spec.whatwg.org/ dan https://html.spec.whatwg.org/print.pdf . CtrlShiftJ dan muat kodenya.

(Diuji di Chrome.)