JavaScript Academy · บทเรียน

Blob และ URL ของออบเจ็กต์

สร้างและใช้ URL ของ Blob สำหรับการดาวน์โหลด

Blob และ URL ของออบเจ็กต์ เป็นบทเรียน JavaScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน JavaScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

ออบเจ็กต์ไบนารีคืออะไร

ออบเจ็กต์ไบนารี (ออบเจ็กต์ข้อมูลขนาดใหญ่แบบไบนารี) ใช้แทนข้อมูลดิบที่แก้ไขไม่ได้ เช่น เนื้อหาไฟล์ ซึ่งอยู่ในหน่วยความจำ ไฟล์เป็นออบเจ็กต์ไบนารีชนิดพิเศษที่มีชื่อและวันที่แก้ไข

ออบเจ็กต์ไบนารีช่วยให้คุณสร้าง แบ่งส่วน และดาวน์โหลดข้อมูลไบนารีในเบราว์เซอร์ได้

การสร้างออบเจ็กต์ไบนารี

สร้างออบเจ็กต์ไบนารีจากอาร์เรย์ของส่วนประกอบ เช่น สตริง บัฟเฟอร์ หรือออบเจ็กต์ไบนารีอื่น ๆ และออบเจ็กต์ตัวเลือกที่ระบุ type ของ MIME

const blob = new Blob(['Hello, world!'], { type: 'text/plain' });

console.log(blob.size);
console.log(blob.type);

ออบเจ็กต์ไบนารีจากหลายส่วนประกอบ

อาร์เรย์ส่วนประกอบจะถูกนำมาต่อกันตามลำดับ คุณสามารถผสมสตริงกับอาร์เรย์ชนิดข้อมูลได้

const blob = new Blob(['line 1\n', 'line 2\n', 'line 3'], {
  type: 'text/plain'
});

console.log(blob.size + ' bytes');

การอ่านออบเจ็กต์ไบนารีกลับ

ออบเจ็กต์ไบนารีมีเมธอดที่ทำงานบนพรอมิส ได้แก่ text(), arrayBuffer() และ stream() สำหรับอ่านเนื้อหา

async function show() {
  const blob = new Blob(['stored data'], { type: 'text/plain' });
  const text = await blob.text();
  console.log(text);
}

show();

การแบ่งส่วนออบเจ็กต์ไบนารี

blob.slice(start, end) จะคืนออบเจ็กต์ไบนารีใหม่ที่ครอบคลุมบางส่วนของต้นฉบับ โดยไม่ต้องคัดลอกข้อมูลทั้งหมด เหมาะสำหรับการอัปโหลดแบบแบ่งเป็นส่วน

const blob = new Blob(['ABCDEFGHIJ'], { type: 'text/plain' });
const chunk = blob.slice(0, 5);

console.log(chunk.size);

การสร้างที่อยู่ของออบเจ็กต์

URL.createObjectURL(blob) จะคืนที่อยู่ชั่วคราวที่ชี้ไปยังออบเจ็กต์ไบนารีในหน่วยความจำ คุณสามารถใช้เป็น img.src, ค่า href ของลิงก์ หรือแหล่งวิดีโอได้

const blob = new Blob(['data'], { type: 'text/plain' });
const url = URL.createObjectURL(blob);

console.log(url.startsWith('blob:'));

การแสดงตัวอย่างรูปภาพที่อัปโหลด

แปลงไฟล์ที่เลือกเป็นที่อยู่ของออบเจ็กต์ แล้วกำหนดให้กับองค์ประกอบรูปภาพเพื่อแสดงตัวอย่างได้ทันที โดยไม่ต้องส่งคำขอไปยังเซิร์ฟเวอร์

const file = document.querySelector('#picker').files[0];
const url = URL.createObjectURL(file);
const img = document.querySelector('#preview');
img.src = url;

console.log('preview ready');

การเรียกใช้การดาวน์โหลด

สร้างออบเจ็กต์ไบนารี สร้างที่อยู่ของออบเจ็กต์ แล้วคลิกจุดยึดชั่วคราวที่มีแอตทริบิวต์ download เพื่อบันทึกไฟล์ที่สร้างขึ้น

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

การเพิกถอนที่อยู่ของออบเจ็กต์

ที่อยู่ของออบเจ็กต์จะเก็บออบเจ็กต์ไบนารีไว้ในหน่วยความจำจนกว่าคุณจะเรียก URL.revokeObjectURL(url) เมื่อใช้งานเสร็จแล้วให้เพิกถอนเสมอ เพื่อป้องกันหน่วยความจำรั่ว

const blob = new Blob(['temp'], { type: 'text/plain' });
const url = URL.createObjectURL(blob);

console.log('using ' + url);
URL.revokeObjectURL(url);
console.log('revoked');

ออบเจ็กต์ไบนารีและเจสัน

คุณสามารถสร้างไฟล์เจสันที่ดาวน์โหลดได้โดยแปลงข้อมูลเป็นสตริงด้วย stringify แล้วใส่ลงในออบเจ็กต์ไบนารีที่มีชนิด MIME ถูกต้อง

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

เหตุใดออบเจ็กต์ไบนารีจึงสำคัญ

ออบเจ็กต์ไบนารีและที่อยู่ของออบเจ็กต์ช่วยให้คุณจัดการข้อมูลไบนารีทั้งหมดภายในอุปกรณ์ของผู้ใช้ได้ ทั้งการแสดงตัวอย่างไฟล์ที่อัปโหลด การสร้างไฟล์สำหรับดาวน์โหลด และการแบ่งไฟล์ขนาดใหญ่ออกเป็นส่วน ๆ อย่าลืมเพิกถอนที่อยู่เมื่อใช้งานเสร็จแล้ว จากนั้นคุณจะได้ส่งไฟล์ไปยังเซิร์ฟเวอร์ด้วย 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);

ตรวจสอบความเข้าใจ

หลังจากใช้ที่อยู่ของออบเจ็กต์สำหรับดาวน์โหลดแล้ว ควรเรียกใช้สิ่งใดเพื่อคืนหน่วยความจำ

ทบทวน: ออบเจ็กต์ไบนารีและที่อยู่ของออบเจ็กต์

คุณได้เรียนรู้การจัดการข้อมูลไบนารีดังนี้

new Blob(parts, { type }) จะสร้างข้อมูลไบนารีที่แก้ไขไม่ได้
อ่านด้วย text(), arrayBuffer() และแบ่งส่วนด้วย slice()
URL.createObjectURL จะสร้างที่อยู่ blob: ที่ใช้งานได้สำหรับการแสดงตัวอย่างและการดาวน์โหลด
เรียก URL.revokeObjectURL เสมอเมื่อใช้งานเสร็จแล้วเพื่อคืนหน่วยความจำ

คำถามที่พบบ่อย

บทเรียน “Blob และ URL ของออบเจ็กต์” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “Blob และ URL ของออบเจ็กต์” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส JavaScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “Blob และ URL ของออบเจ็กต์”

สร้างและใช้ URL ของ Blob สำหรับการดาวน์โหลด คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน JavaScript Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน JavaScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “Blob และ URL ของออบเจ็กต์” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน JavaScript Academy นี้ได้ไหม

ได้ บทเรียน JavaScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ JavaScript Academy