JS 二进制之 File、Blob、FileReader、ArrayBuffer、Base64

1. Blob

Blob【Binary large object】即二进制大对象，表示原始文件的数据。它表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转成 ReadableStream 来用于数据操作。简单来说， Blob 就是一个不可修改的 二进制文件！

1.1 Blob 创建

1new Blob(array, options);
2

• array 是一个包含字符串、ArrayBuffer、ArrayBufferView、Blob 等的 数组或可迭代对象。多个 BlobParts 会按照它们在数组中的顺序进行连接以形成 Blob。如果省略该参数，则创建一个空的 Blob。

• options 是一个对象，可选属性为

  • type 【较常用】 ，默认值为""，表示放入到 blob 对象中内容的 MIME 类型

【补】： 常见的 MIME 类型如下：

1.2 Blob 切片

Blob 对象内置了 slice() 方法用来将 blob 对象分片，其语法如下：

1const blob = instanceOfBlob.slice([start [, end [, contentType]]]};
2

其有三个参数：

• start：设置切片的起点，即切片开始位置。默认值为 0，这意味着切片应该从第一个字节开始；
• end：设置切片的结束点，会对该位置之前的数据进行切片。默认值为 blob.size；
• contentType：设置新 blob 的 MIME 类型。如果省略 type，则默认为 blob 的原始值。

下面来看例子：

1const iframe = document.getElementsByTagName("iframe")[0];
2
3const blob = new Blob(["Hello World"], {type: "text/plain"});
4
5const subBlob = blob.slice(0, 5);
6
7iframe.src = URL.createObjectURL(subBlob);
8

此时页面会显示"Hello"。

2. File

File对象 其实就是特殊类型的 Blob，即 Blob 的属性和方法同样适用于 File 对象。

JS 中主要有两个地方产生 File 对象：

• 通过 <input type='file'> 元素上传文件后，返回的 FileList 对象
• 文件拖放操作生成的 DataTransfer 对象

2.1 < input / >

1<input type="file" id="fileInput" multiple="multiple">
2const fileInput = document.getElementById("fileInput");
3fileInput.onchange = (e) => {
4  console.log(e.target.files);
5}
6

2.2 文件拖放

 1<div id="drop-zone"></div>
 2
 3const dropZone = document.getElementById("drop-zone");
 4dropZone.ondragover = (e) => {
 5   e.preventDefault();
 6}
 7dropZone.ondrop = (e) => {
 8  e.preventDefault();
 9  const files = e.dataTransfer.files;
10  console.log(files)
11}
12

注意：

• 两个拖拽事件中都需要添加 e.preventDefault()，用来阻止默认事件，可以阻止浏览器的一些默认行为。比如默认浏览器不允许任何拖拽操作！！

• e.dataTransfer.files 的属性值是一个 FileList 数组。

3. FileReader

FileReader 是一个异步 API， 用于读取文件并提取其内容以供进一步使用。 【 FileReader 可以将 Blob 读取为不同的格式！！】

3.1 基本使用

3.1.1 创建对象：

1const reader = new FileReader();
2

3.1.2 自身方法：

• readAsArrayBuffer()：读取指定 Blob 中的内容，完成之后， result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象；

• FileReader.readAsBinaryString()：读取指定 Blob 中的内容，完成之后， result 属性中将包含所读取文件的 原始二进制数据；

• FileReader.readAsDataURL()：读取指定 Blob 中的内容，完成之后， result 属性中将包含一个 data: URL 格式的 Base64 字符串 以表示所读取文件的内容。

• FileReader.readAsText()：读取指定 Blob 中的内容，完成之后， result 属性中将包含 一个字符串 以表示所读取的文件内容。

可以看到，上面这些方法都接受一个要读取的 blob 对象作为参数，读取完之后会将读取的结果放入对象的 result 属性中。

3.1.3 事件处理：

• abort：该事件在读取操作被中断时触发；
• error：该事件在读取操作发生错误时触发；
• load：该事件在读取操作完成时触发；
• progress：该事件在读取 Blob 时触发。

当然，这些方法可以加上前置 on 后在HTML元素上使用，比如 onload、 onerror、 onabort、 onprogress。除此之外，由于 FileReader 对象继承自 EventTarget，因此还可以使用 addEventListener() 监听上述事件。

注意： progress 事件提供了两个属性： loaded（已读取量）和 total（需读取总量）。

4. ArrayBuffer

ArrayBuffer 对象用来表示通用的、固定长度的 原始二进制数据缓冲区。ArrayBuffer 的内容不能直接操作，只能通过 DataView 对象或 TypedArrray 对象来访问。这些对象用于读取和写入缓冲区内容。

注意： ArrayBuffer 本身就是一个黑盒，不能直接读写所存储的数据，需要借助以下视图对象来读写。

ArrayBuffer vs Blob: Blob 作为一个整体文件， 适合用于传输 ； 当需要对二进制数据进行操作时（比如要修改某一段数据时），就可以使用 ArrayBuffer。

具体操作方法详见 谈谈JS二进制

5. Object URL

Object URL 又称 Blog URL，它是一个用来表示File Object 或Blob Object 的URL。在网页中，我们可能会看到过这种形式的 Blob URL： 

创建一个指向 Blob 或 File 对象的可以用作图像、二进制数据下载链接等的 URL 源，可以在 < img /> < script /> 中用当作 src 属性的值！！

1const objUrl = URL.createObjectURL(new File([""], "filename")); console.log(objUrl); URL.revokeObjectURL(objUrl);
2

6. Base64

Base64 是一种基于 64个可打印字符来表示二进制数据 的表示方法。Base64 编码普遍应用于需要通过被设计为处理文本数据的媒介< img />上储存和传输二进制数据而需要编码该二进制数据的场景。这样是为了保证数据的完整并且不用在传输过程中修改这些数据。

在 JavaScript 中，有两个函数被分别用来处理解码和编码 base64 字符串：

• atob()：解码，解码一个 Base64 字符串；
• btoa()：编码，从一个字符串或者二进制数据编码一个 Base64 字符串。

6.1 应用场景

6.1.1 toDataURL() 方法把 canvas 画布内容生成 base64 编码格式的图片

1const canvas = document.getElementById('canvas'); const ctx = canvas.getContext("2d"); const dataUrl = canvas.toDataURL();
2

6.1.2 readAsDataURL() 方法把读取的文件转为base64格式的data URL返回

7. 总结如下