Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> JavaScript

Phương thức File.slice() (Blob.slice()) trong HTML5 làm gì?

Phương thức Blob.slice() (cũng khả dụng trên File vì File kế thừa từ Blob) tạo một Blob mới chứa dữ liệu trong một khoảng byte cụ thể của Blob gốc.

Cú pháp

var newBlob = blob.slice(startByte, endByte, contentType);
  • startByte: Vị trí bắt đầu (bao gồm), mặc định 0.
  • endByte: Vị trí kết thúc (không bao gồm), mặc định là kích thước blob.
  • contentType: Loại MIME của blob mới, mặc định kế thừa từ blob gốc.

Ví dụ: Gửi phần dữ liệu nhị phân qua XMLHttpRequest

var xhr = new XMLHttpRequest();
xhr.open("POST", url, true);
xhr.onload = function(event) { /* xử lý phản hồi */ };

// Tạo blob từ văn bản (demo)
var blob = new Blob(['demo'], { type: 'text/plain' });

// Gửi toàn bộ blob (hoặc blob.slice(0, 100) để gửi 100 byte đầu)
xhr.send(blob);

Ứng dụng thực tế

  • Upload file lớn chia nhỏ (chunked upload): Cắt file thành nhiều blob nhỏ, gửi song song hoặc tuần tự, có thể tạm dừng/tiếp tục.
  • Đọc file lớn dần (streaming): Đọc từng phần để không tiêu tốn bộ nhớ.
  • Xử lý video/audio: Cắt ghép media phía client trước khi upload.

slice() không sao chép dữ liệu (zero-copy) trong hầu hết trình duyệt hiện đại, rất hiệu quả về bộ nhớ.