Blob

注意：此功能在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

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>

JavaScript

此代码的主要部分（出于示例目的）是 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。

规范

规范
文件 API
# blob-section

浏览器兼容性

BCD 表仅在浏览器中加载

另请参阅