Bagaimana untuk memuat naik gumpalan menggunakan JavaScript?

Blob mewakili objek besar binari seperti imej, audio atau objek multimedia lain Kadangkala kod boleh laku binari juga disimpan sebagai Blob.

Kami boleh menggunakan JavaScript untuk memuat naik gumpalan seperti mana-mana fail data lain.

JavaScript boleh menggunakan XMLHttpRequest atau ambil API untuk memuat naik gumpalan.

1. Menggunakan XMLHTTPRequest

XMLHttpRequest (XHR) ialah API seperti objek yang kaedahnya memindahkan data antara penyemak imbas web dan pelayan web. Persekitaran JavaScript penyemak imbas menyediakan objek ini. Biasanya digunakan untuk menghantar dan menerima data secara tidak segerak tanpa memulakan semula tapak web. Ini membolehkan anda menikmati halaman web yang dinamik, mesra pengguna dan pantas.

Contoh

Ini adalah contoh penggunaan XMLHttpRequest untuk memuat naik Blob -

var blob = new Blob(["Some conventional data"], { type: "text/plain" });
var xhr = new XMLHttpRequest();
xhr.open("POST", "/upload", true);
xhr.onload = function (e) {
   if (xhr.readyState === 4 && xhr.status === 200) {
      console.log(xhr.responseText);
   }
};
xhr.send(blob);

Di sini, kami menggunakan beberapa data gumpalan untuk membuat permintaan POST ke titik akhir /muat naik API bahagian belakang. Selepas pelayan bertindak balas dengan jayanya, kami log keluar respons.

2. Gunakan Get API

Fetch API membolehkan anda membuat permintaan kepada pelayan dan mendapatkan semula data daripadanya. Ia terbina dalam pelayar web moden dan boleh digunakan untuk membuat permintaan GET dan POST. API Ambil menggunakan kaedah fetch(), yang mengembalikan Janji yang diselesaikan kepada objek Respons. Objek Respons kemudiannya boleh digunakan untuk mengakses data yang dikembalikan oleh pelayan. API Ambil sering digunakan sebagai pengganti untuk API XMLHttpRequest yang lebih lama dan lebih moden dan mesra pengguna. Ia juga lebih serba boleh kerana ia boleh digunakan untuk membuat permintaan kepada pelayan selain daripada pelayan pengehosan halaman web.

Ini ialah contoh menggunakan fetch untuk memuat naik Blob -

var blob = new Blob(["Some conventional data"], { type: "text/plain" });
var formData = new FormData();
formData.append("file", blob);
fetch("/upload", {
   method: "POST",
   body: formData,
})
.then((response) => response.text())
.then((responseText) => {
   console.log(responseText);
});

Jadi dengan cara ini, anda boleh memuat naik data gumpalan daripada JavaScript vanila bahagian hadapan ke pelayan menggunakan XMLHTTPRequest atau ambil API tanpa menggunakan mana-mana pustaka pihak ketiga.

Atas ialah kandungan terperinci Bagaimana untuk memuat naik gumpalan menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!