Blob

Baseline 廣泛可用 *

此特性已相當成熟,可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來,各瀏覽器均已提供此特性。

* 此特性的某些部分可能存在不同級別的支援。

注意:此功能在 Web Workers 中可用。

Blob 介面表示一個 blob,它是一個類似檔案的、不可變的原始資料物件;它可以被讀取為文字或二進位制資料,或者轉換為 ReadableStream,以便使用其方法來處理資料。

Blob 可以表示不一定是 JavaScript 原生格式的資料。 File 介面基於 Blob,繼承了 blob 的功能並擴充套件了對使用者系統上檔案的支援。

使用 Blob

要從其他非 blob 物件和資料構造 Blob,請使用 Blob() 建構函式。要建立包含另一個 blob 資料子集的 blob,請使用 slice() 方法。要獲取使用者檔案系統上檔案的 Blob 物件,請參閱 File 文件。

接受 Blob 物件的 API 也列在 File 文件中。

建構函式

Blob()

返回一個新建立的 Blob 物件,該物件包含傳遞到建構函式中的陣列中所有資料的串聯。

例項屬性

Blob.size 只讀

Blob 物件中包含的資料的大小(以位元組為單位)。

Blob.type 只讀

一個字串,指示 Blob 中包含的資料的 MIME 型別。如果型別未知,則此字串為空。

例項方法

Blob.arrayBuffer()

返回一個 Promise,該 Promise 解析為一個 ArrayBuffer,其中包含 Blob 的全部內容作為二進位制資料。

Blob.bytes()

返回一個 Promise,該 Promise 解析為一個 Uint8Array,其中包含 Blob 的內容。

Blob.slice()

返回一個新的 Blob 物件,其中包含在呼叫它的 blob 中指定位元組範圍的資料。

Blob.stream()

返回一個 ReadableStream,可用於讀取 Blob 的內容。

Blob.text()

返回一個 Promise,該 Promise 解析為一個字串,其中包含 Blob 的全部內容,並將其解釋為 UTF-8 文字。

示例

建立 Blob

Blob() 建構函式可以從其他物件建立 blob。例如,要從 JSON 字串構造一個 blob

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

建立表示型別化陣列內容的 URL

以下示例建立了一個 JavaScript 型別化陣列,並建立一個包含該型別化陣列資料的新 Blob。然後呼叫 URL.createObjectURL() 將 blob 轉換為 URL

html
<p>
  This example creates a typed array containing the ASCII codes for the space
  character through the letter Z, then converts it to an object URL. A link to
  open that object URL is created. Click the link to see the decoded object URL.
</p>

出於示例目的,此程式碼中的主要部分是 typedArrayToURL() 函式,該函式從給定的型別化陣列建立 Blob 並返回其物件 URL。在將資料轉換為物件 URL 後,它可用於多種方式,包括作為 <img> 元素的 src 屬性的值(當然,前提是資料包含影像)。

js
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 = "View live result of the example code above";
    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 = "Open the array URL";
  document.body.appendChild(link);
}

從 Blob 中提取資料

讀取 Blob 內容的一種方法是使用 FileReader。以下程式碼將 Blob 的內容讀取為型別化陣列

js
const reader = new FileReader();
reader.addEventListener("loadend", () => {
  // reader.result contains the contents of blob as a typed array
});
reader.readAsArrayBuffer(blob);

讀取 Blob 內容的另一種方法是使用 Response。以下程式碼將 Blob 的內容讀取為文字

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

或者使用 Blob.text()

js
const text = await blob.text();

透過使用 FileReader 的其他方法,可以將 Blob 的內容讀取為字串或資料 URL。

規範

規範
File API
# blob-section

瀏覽器相容性

另見