Blob dan URL Objek
Cipta dan gunakan URL blob untuk muat turun.
Blob dan URL Objek ialah pelajaran Akademi JavaScript percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Akademi JavaScript, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Akademi JavaScript merangkumi sejumlah 4 pelajaran.
Apakah Objek Binari Besar?
Objek Binari Besar mewakili data mentah tidak berubah, seperti kandungan fail, dalam memori. Fail ialah sejenis objek binari besar yang mempunyai nama dan tarikh pengubahsuaian.
Gumpalan data membolehkan anda membina, menghiris dan memuat turun data binari dalam pelayar.
Mencipta Gumpalan Data
Bina gumpalan data daripada tatasusunan bahagian (rentetan, penimbal dan gumpalan data lain) serta objek pilihan yang menentukan MIME type.
const blob = new Blob(['Hello, world!'], { type: 'text/plain' });
console.log(blob.size);
console.log(blob.type);Gumpalan Data daripada Pelbagai Bahagian
Tatasusunan bahagian digabungkan mengikut susunan. Anda boleh mencampurkan rentetan dan tatasusunan terjenis.
const blob = new Blob(['line 1\n', 'line 2\n', 'line 3'], {
type: 'text/plain'
});
console.log(blob.size + ' bytes');Membaca Semula Gumpalan Data
Gumpalan data menyediakan kaedah berasaskan Promise text(), arrayBuffer() dan stream() untuk membaca kandungannya.
async function show() {
const blob = new Blob(['stored data'], { type: 'text/plain' });
const text = await blob.text();
console.log(text);
}
show();Menghiris Gumpalan Data
blob.slice(start, end) mengembalikan gumpalan data baharu yang meliputi sebahagian daripada yang asal, tanpa menyalin keseluruhannya. Ini berguna untuk muat naik berpecah kepada bahagian.
const blob = new Blob(['ABCDEFGHIJ'], { type: 'text/plain' });
const chunk = blob.slice(0, 5);
console.log(chunk.size);Mencipta URL Objek
URL.createObjectURL(blob) mengembalikan URL berjangka pendek yang menunjuk kepada gumpalan data dalam memori. Anda boleh menggunakannya sebagai img.src, pautan href atau sumber video.
const blob = new Blob(['data'], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
console.log(url.startsWith('blob:'));Mempratonton Imej yang Dimuat Naik
Tukarkan fail yang dipilih kepada URL objek dan tetapkan URL itu kepada elemen imej untuk mendapatkan pratonton serta-merta tanpa memerlukan perjalanan pergi balik ke pelayan.
const file = document.querySelector('#picker').files[0];
const url = URL.createObjectURL(file);
const img = document.querySelector('#preview');
img.src = url;
console.log('preview ready');Mencetuskan Muat Turun
Cipta gumpalan data, hasilkan URL objek dan klik sauh sementara dengan atribut download untuk menyimpan fail yang dijana.
function download(text, filename) {
const blob = new Blob([text], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = filename;
a.click();
URL.revokeObjectURL(url);
}
download('report data', 'report.txt');Membatalkan URL Objek
URL objek mengekalkan gumpalan data dalam memori sehingga anda memanggil URL.revokeObjectURL(url). Sentiasa batalkan URL apabila selesai untuk mengelakkan kebocoran memori.
const blob = new Blob(['temp'], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
console.log('using ' + url);
URL.revokeObjectURL(url);
console.log('revoked');Gumpalan Data dan JSON
Anda boleh membina fail JSON yang boleh dimuat turun dengan menukar data kepada rentetan menggunakan stringify, lalu memasukkannya ke dalam gumpalan data dengan jenis MIME yang betul.
const data = { name: 'Ada', score: 99 };
const blob = new Blob([JSON.stringify(data, null, 2)], {
type: 'application/json'
});
console.log(blob.type);
console.log(blob.size + ' bytes');Mengapa Gumpalan Data Penting
Gumpalan data dan URL objek membolehkan anda mengendalikan data binari sepenuhnya pada sisi klien: mempratonton muat naik, menjana muat turun dan membahagikan fail besar kepada bahagian. Ingat untuk membatalkan URL apabila selesai. Seterusnya, anda akan menghantar fail kepada pelayan dengan fetch.
const blob = new Blob(['export'], { type: 'text/csv' });
const url = URL.createObjectURL(blob);
console.log('csv url created:', url.startsWith('blob:'));
URL.revokeObjectURL(url);Semakan Ringkas
Selepas menggunakan URL objek untuk muat turun, apakah yang patut anda panggil untuk membebaskan memori?
Imbas Kembali: Gumpalan Data dan URL Objek
Anda telah mempelajari cara mengendalikan data binari:
new Blob(parts, { type })membina data binari yang tidak berubah.- Baca dengan
text(),arrayBuffer(); pecahkan denganslice(). URL.createObjectURLmenghasilkan URLblob:yang boleh digunakan untuk pratonton dan muat turun.- Sentiasa panggil
URL.revokeObjectURLapabila selesai untuk membebaskan memori.
Pelajari JavaScript dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 59
- Pelajaran
- 200
Soalan Lazim
Adakah pelajaran “Blob dan URL Objek” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Akademi JavaScript, termasuk “Blob dan URL Objek”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Akademi JavaScript merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Blob dan URL Objek”?
Cipta dan gunakan URL blob untuk muat turun. Anda berlatih Akademi JavaScript menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Akademi JavaScript?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Akademi JavaScript di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.
Berapa lamakah pelajaran “Blob dan URL Objek” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Akademi JavaScript ini?
Ya. Setiap pelajaran Akademi JavaScript menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.