1. Blob
Blob【Binary large object】即二进制大对象，表示原始文件的数据。它表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转成 ReadableStream 来用于数据操作。简单来说，Blob 就是一个不可修改的二进制文件！
1.1 Blob 创建
sql
new Blob(array, options);array是一个包含字符串、ArrayBuffer、ArrayBufferView、Blob 等的数组或可迭代对象。多个 BlobParts 会按照它们在数组中的顺序进行连接以形成 Blob。如果省略该参数，则创建一个空的 Blob。options是一个对象，可选属性为- type 【较常用】 ，默认值为""，表示放入到 blob 对象中内容的 MIME 类型
【补】： 常见的 MIME 类型如下：
| MIME 类型 | 描述 |
|---|---|
| text/plain | 纯文本文档 |
| text/html | HTML 文档 |
| text/javascript | JavaScript 文件 |
| text/css | CSS 文件 |
| application/json | JSON文件 |
| application/pdf | PDF文件 |
| application/xml | XML 文件 |
| image/jpeg | JPEG图像 |
| image/png | PNG图像 |
| image/gif | GIF 图像 |
| image/svg+xml | SVG 图像 |
| audio/mpeg | MP3 文件 |
| video/mpeg | MP4 文件 |
1.2 Blob 切片
Blob 对象内置了 slice() 方法用来将 blob 对象分片，其语法如下：
ini
const blob = instanceOfBlob.slice([start [, end [, contentType]]]};其有三个参数：
start：设置切片的起点，即切片开始位置。默认值为 0，这意味着切片应该从第一个字节开始；end：设置切片的结束点，会对该位置之前的数据进行切片。默认值为blob.size；contentType：设置新 blob 的 MIME 类型。如果省略 type，则默认为 blob 的原始值。
下面来看例子：
ini
const iframe = document.getElementsByTagName("iframe")[0];
const blob = new Blob(["Hello World"], {type: "text/plain"});
const subBlob = blob.slice(0, 5);
iframe.src = URL.createObjectURL(subBlob);此时页面会显示"Hello"。
2. File
File对象其实就是特殊类型的 Blob，即 Blob 的属性和方法同样适用于 File 对象。
JS 中主要有两个地方产生 File 对象：
- 通过
<input type='file'>元素上传文件后，返回的 FileList 对象 - 文件拖放操作生成的
DataTransfer对象
2.1 < input / >
ini
<input type="file" id="fileInput" multiple="multiple">
const fileInput = document.getElementById("fileInput");
fileInput.onchange = (e) => {
console.log(e.target.files);
}2.2 文件拖放
ini
<div id="drop-zone"></div>
const dropZone = document.getElementById("drop-zone");
dropZone.ondragover = (e) => {
e.preventDefault();
}
dropZone.ondrop = (e) => {
e.preventDefault();
const files = e.dataTransfer.files;
console.log(files)
}注意：
-
两个拖拽事件中都需要添加
e.preventDefault()，用来阻止默认事件，可以阻止浏览器的一些默认行为。比如默认浏览器不允许任何拖拽操作！！ -
e.dataTransfer.files的属性值是一个 FileList 数组。
3. FileReader
FileReader是一个异步 API，用于读取文件并提取其内容以供进一步使用。 【 FileReader 可以将 Blob 读取为不同的格式！！】
3.1 基本使用
3.1.1 创建对象：
ini
const reader = new FileReader();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 属性的值！！
arduino
const objUrl = URL.createObjectURL(new File([""], "filename")); console.log(objUrl); URL.revokeObjectURL(objUrl);6. Base64
Base64是一种基于64个可打印字符来表示二进制数据的表示方法。Base64 编码普遍应用于需要通过被设计为处理文本数据的媒介< img />上储存和传输二进制数据而需要编码该二进制数据的场景。这样是为了保证数据的完整并且不用在传输过程中修改这些数据。
在 JavaScript 中，有两个函数被分别用来处理解码和编码 base64 字符串：
atob()：解码，解码一个 Base64 字符串；btoa()：编码，从一个字符串或者二进制数据编码一个 Base64 字符串。
6.1 应用场景
6.1.1 toDataURL()方法把 canvas 画布内容生成 base64 编码格式的图片
javascript
const canvas = document.getElementById('canvas'); const ctx = canvas.getContext("2d"); const dataUrl = canvas.toDataURL();6.1.2 readAsDataURL()方法把读取的文件转为base64格式的data URL返回
7. 总结如下
