Blob

Sử dụng blob

Để tạo một Blob từ các đối tượng không phải blob và dữ liệu khác, dùng hàm tạo Blob(). Để tạo một blob chứa một phần dữ liệu của blob khác, dùng phương thức slice(). Để lấy đối tượng Blob cho một tệp trên hệ thống tệp của người dùng, xem tài liệu về File.

Các API chấp nhận đối tượng Blob cũng được liệt kê trong tài liệu File.

Hàm tạo

Blob()

Trả về một đối tượng Blob mới được tạo, chứa phần nối của toàn bộ dữ liệu trong mảng được truyền vào hàm tạo.

Thuộc tính thể hiện

Blob.size Read only

Kích thước tính bằng byte của dữ liệu chứa trong đối tượng Blob.

Blob.type Read only

Một chuỗi biểu thị kiểu MIME của dữ liệu chứa trong Blob. Nếu kiểu chưa biết, chuỗi này rỗng.

Phương thức thể hiện

Blob.arrayBuffer()

Trả về một promise được resolve với một ArrayBuffer chứa toàn bộ nội dung của Blob dưới dạng dữ liệu nhị phân.

Blob.bytes()

Trả về một promise được resolve với một Uint8Array chứa nội dung của Blob.

Blob.slice()

Trả về một đối tượng Blob mới chứa dữ liệu trong phạm vi byte được chỉ định của blob mà phương thức được gọi trên đó.

Blob.stream()

Trả về một ReadableStream có thể dùng để đọc nội dung của Blob.

Blob.text()

Trả về một promise được resolve với một chuỗi chứa toàn bộ nội dung của Blob, được diễn giải là văn bản UTF-8.

Ví dụ

Tạo blob

Hàm tạo Blob() có thể tạo blob từ các đối tượng khác. Ví dụ, để tạo blob từ một chuỗi JSON:

const obj = { hello: "world" };
const blob = new Blob([JSON.stringify(obj, null, 2)], {
  type: "application/json",
});

Tạo URL biểu diễn nội dung của một typed array

Ví dụ sau tạo một typed array JavaScript và tạo một Blob mới chứa dữ liệu của typed array đó. Sau đó, nó gọi URL.createObjectURL() để chuyển blob thành một URL.

<p>
  Ví dụ này tạo một typed array chứa các mã ASCII từ ký tự khoảng trắng đến chữ
  Z, rồi chuyển nó thành một object URL. Một liên kết để mở object URL đó sẽ
  được tạo ra. Nhấp vào liên kết để xem object URL sau khi được giải mã.
</p>

Phần mã chính của ví dụ này là hàm typedArrayToURL(), hàm này tạo một Blob từ typed array được cung cấp và trả về một object URL cho nó. Sau khi dữ liệu được chuyển thành object URL, bạn có thể dùng nó theo nhiều cách, bao gồm làm giá trị cho thuộc tính src của phần tử <img> (dĩ nhiên là với giả định dữ liệu chứa một hình ảnh).

function showViewLiveResultButton() {
  if (window.self !== window.top) {
    // Ensure that if our document is in a frame, we get the user
    // to first open it in its own tab or window. Otherwise, this
    // example won't work.
    const p = document.querySelector("p");
    p.textContent = "";
    const button = document.createElement("button");
    button.textContent = "Xem kết quả trực tiếp của đoạn mã ví dụ ở trên";
    p.append(button);
    button.addEventListener("click", () => window.open(location.href));
    return true;
  }
  return false;
}

if (!showViewLiveResultButton()) {
  function typedArrayToURL(typedArray, mimeType) {
    return URL.createObjectURL(
      new Blob([typedArray.buffer], { type: mimeType }),
    );
  }
  const bytes = new Uint8Array(59);

  for (let i = 0; i < 59; i++) {
    bytes[i] = 32 + i;
  }

  const url = typedArrayToURL(bytes, "text/plain");
  const link = document.createElement("a");

  link.href = url;
  link.innerText = "Mở URL của mảng";
  document.body.appendChild(link);
}

Trích xuất dữ liệu từ blob

Một cách để đọc nội dung từ Blob là dùng FileReader. Đoạn mã sau đọc nội dung của một Blob dưới dạng typed array:

const reader = new FileReader();
reader.addEventListener("loadend", () => {
  // reader.result chứa nội dung của blob dưới dạng typed array
});
reader.readAsArrayBuffer(blob);

Một cách khác để đọc nội dung từ Blob là dùng Response. Đoạn mã sau đọc nội dung của một Blob dưới dạng văn bản:

const text = await new Response(blob).text();

Hoặc bằng cách dùng Blob.text():

const text = await blob.text();

Bằng cách dùng các phương thức khác của FileReader, bạn có thể đọc nội dung của Blob dưới dạng chuỗi hoặc data URL.

Thông số kỹ thuật

Tương thích trình duyệt

Xem thêm

• FileReader
• File
• URL.createObjectURL()
• Sử dụng tệp từ ứng dụng web