Blob API

Blob（Binary Large Object）对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream 来用于数据操作。

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

基本用法

构造函数

可以通过 Blob 的构造函数创建 Blob 对象：

const blob = new Blob(data [, options]);

参数

data：类数组类型，数组中的每一项连接起来构成 Blob 对象的数据，数组中的每项元素可以是 ArrayBuffer、ArrayBufferView、Blob、DOMString
options：可选项，字典格式类型，可以指定如下两个属性
- type：默认值为空字符串 ''，它代表了将会被放入到 Blob 中的数组内容的 MIME 类型
- endings：默认值为 transparent，用于指定包含行结束符 \n 的字符串如何被写入。它是以下两个值中的一个：
  - native，表示行结束符会被更改为适合宿主操作系统文件系统的换行符
  - transparent，表示会保持 Blob 中保存的结束符不变

属性和方法

属性

属性	说明
`Blob.size`	（只读）Blob 对象的大小（单位：字节）
`Blob.type`	（只读）Blob 对象的 MIME 类型，如果是未知，则是空字符串

方法

属性	说明
`Blob.slice([start [, end [, contentType]]])`	返回源 Blob 对象指定范围的新 Blob 对象
`Blob.stream()`	返回能读取 Blob 对象内容的 ReadableStream
`Blob.text()`	返回 Promise 且包含 Blob 所有内容的 UTF-8 格式的 USVString
`Blob.arrayBuffer()`	返回 Promise 且包含 Blob 所有内容二进制格式的 ArrayBuffer

与 ArrayBuffer 的关系

相同点：Blob 和 ArrayBuffer 都是二进制的容器

ArrayBuffer：ArrayBuffer 更加底层，就是一段纯粹的内存上的二进制数据，我们可以对其任何一个字节进行单独的修改，也可以根据我们的需要以我们制定的形式读取指定范围的数据
Blob：Blob 就是将一段二进制数据做了一个封装，我们拿到的就是一个整体，可以看到它的整体属性大小、类型；也可以对其分割，但不能了解到它的细节

联系：Blob 可以接受一个 ArrayBuffer 作为参数生成一个 Blob 对象，此行为就相当于对 ArrayBuffer 数据做一个封装，之后就是以整体的形式展现了

应用上的区别：由于 ArrayBuffer 和 Blob 的特性，Blob 作为一个整体文件，适合用于传输；而只有需要关注细节（比如修改某段数据时），才需要用到 ArrayBuffer

应用示例

文件下载：通过 URL.createObjectURL(blob) 生成 Blob URL，赋给 a.download 属性
图片显示：通过 URL.createObjectURL(blob) 生成 Blob URL，赋给 img.src 属性
资源分段上传：通过 Blob.slice 可以分割二进制数据为子 Blob 上传
本地读取文件：FileReader 的 API 可以将 Blob 或 File 转化为文本/ArrayBuffer/Data URL 等类型

代码示例

const data1 = 'a';
const data2 = 'b';
const data3 = '<div style="color: red;">This is a blob</div>';
const data4 = { name: 'abc' };

const blob1 = new Blob([data1]);
const blob2 = new Blob([data1, data2]);
const blob3 = new Blob([data3]);
const blob4 = new Blob([JSON.stringify(data4)]);
const blob5 = new Blob([data4]);
const blob6 = new Blob([data3, data4]);

console.log(blob1);
// Blob { size: 1, type: "" }
console.log(blob2);
// Blob { size: 2, type: "" }
console.log(blob3);
// Blob { size: 44, type: "" }
console.log(blob4);
// Blob { size: 14, type: "" }
console.log(blob5);
// Blob { size: 15, type: "" }
console.log(blob6);
// Blob { size: 59, type: "" }

blob4：通过 JSON.stringify 把 data4 对象转换成 JSON 的字符串
blob5：直接使用 data4 创建

实际上，当使用普通对象创建 Blob 对象时，相当于调用了普通对象的 toString 方法得到字符串数据，然后再创建 Blob 对象。

所以 blob5 保存的数据是 "[object Object]"，是 15 个字节（不包含最外层的引号）。

Blob URL

Blob URL 是 Blob 协议的 URL，格式如下：

blob:http://xxx

Blobl Url:

Blob Url

Blob URL 可以通过 URL.createObjectURL(blob) 创建，在绝大部分场景下，我们可以像使用 HTTP 协议的 URL 一样，使用 Blob URL

和冗长的 Base64 格式的 Data URL 相比，Blob URL 的长度显然不能够存储足够的信息，这也就意味着它只是类似于一个浏览器内部的引用。

从这个角度来看，Blob URL 是 浏览器自行制定的伪协议。

常见的应用场景：

作为文件的下载地址
作为图片资源地址
本地视频文件上传前播放器的预览地址

参考资料：

JS知识图谱