Blob - 表示一个不可变的原始数据的类似文件的对象

Blob 对象表示一个 Blob，它是不可变的原始数据的类似文件的对象；它们可以作为文本或二进制数据读取，也可以转换为 ReadableStream，因此可以使用其方法来处理数据。

Blob 可以表示不一定是 JavaScript 原生格式的数据。 File 接口基于 Blob，继承了 Blob 功能并将其扩展以支持用户系统上的文件。

使用 Blob

要从其他非 blob 对象和数据构造一个 Blob，请使用 Blob() 构造函数。要创建包含另一个 Blob 数据的子集的 Blob，请使用 slice() 方法。要获取用户文件系统上文件的 Blob 对象，请参见 File 文档。

File 文档中也列出了接受 Blob 对象的 API。

构造函数

Blob()

返回一个新创建的 Blob 对象，该对象包含传递给构造函数的数组中的所有数据。

实例属性

Blob.prototype.size 只读

Blob 对象中包含的数据的大小（以字节为单位）。

Blob.prototype.type 只读

一个字符串，指示 Blob 中包含的数据的 MIME 类型。如果类型未知，则此字符串为空。

实例方法

Blob.prototype.arrayBuffer()

返回一个解析为 ArrayBuffer 的承诺，该结果以二进制数据表示 Blob 的全部内容。

Blob.prototype.slice()

返回一个新的 Blob 对象，该对象包含被调用的 Blob 的指定字节范围内的数据。

Blob.prototype.stream()

返回一个 ReadableStream，可用于读取 Blob 的内容。

Blob.prototype.text()

返回一个解析为 USVString 的承诺，它包含了被解析为 UTF-8 文本的 Blob 的全部内容。

实例

创建 Blob

Blob() 构造函数可以从其他对象创建 Blob。例如，要根据 JSON 字符串构造 Blob：

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

创建一个表示类型化数组内容的 URL

以下代码创建 JavaScript 类型数组，并创建一个包含该类型数组数据的新 Blob。然后，它调用 URL.createObjectURL()，将 blob 转换为 URL。

出于实例目的，该代码的主要部分是 typedArrayToURL() 函数，该函数根据给定的类型化数组创建一个 Blob，并为其返回对象 URL。将数据转换为对象 URL 后，可以通过多种方式使用它，包括用作 <img> 元素的 src 的值属性（当然，假设数据包含图片）。

<p>本实例创建一个类型化的数组，该数组包含通过字母 Z 表示空格字符的 ASCII 代码，
然后将其转换为对象 URL。创建了用于打开该对象 URL 的链接。
单击链接以查看解码的对象 URL。</p>

<script>
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 = '打开数组 URL';

document.body.appendChild(link);
</script>

尝试一下 »

单击实例中的链接以查看浏览器对对象 URL 进行解码。

从 Blob 中提取数据

从 Blob 读取内容的一种方法是使用 FileReader。以下代码以类型数组的形式读取 Blob 的内容：

const reader = new FileReader();
reader.addEventListener('loadend', () => {
   // reader.result 将 blob 的内容包含为类型化数组
});
reader.readAsArrayBuffer(blob);

从 Blob 读取内容的另一种方法是使用 Response。以下代码以文本形式读取 Blob 的内容：

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

或使用 Blob.prototype.text()：

const text = await blob.text();

通过使用 FileReader 的其他方法，可以将 Blob 的内容读取为字符串或数据 URL。

规范

规范	状态	备注
File API The Blob interface 的定义	工作草案	初始定义。

桌面浏览器兼容性

移动浏览器兼容性

1. 在 Firefox 16 之前的版本中，第二个参数设置为 null 或 undefined ，会导致错误，而不是作为空字典来处理。

2. 在 Firefox 12 之前的版本中，存在一个错误会影响 Blob.slice() 的行为；它不适用于超出有符号 64 位值范围的 start 和 end 位置；现在已修复为支持无符号 64 位值。

相关链接

• BlobBuilder
• FileReader
• File
• URL.createObjectURL
• 使用 Web 应用程序中的文件