二进制学习——Blob，ArrayBuffer、File、FileReader和FormData的区别

前言

Blob、ArrayBuffer、File、fileReader、formData这些名词总是经常看到，知道一点又好像不知道，像是同一个东西好像又不是，总是模模糊糊，最近终于下决心要弄清楚。

为了更好的理解每个名词的意义，本文先用尽量通俗的语言解释下各自的区别，大概能在宏观上区分之后，再会在其他博文中做单个解释。

这些名词里，Blob、ArrayBuffer、File可以归为一类，它们都是数据；而fileReader算是一种工具，用来读取数据；formData可以看做是一个应用数据的场景。因此，我们首先着重区分Blob、ArrayBuffer、File，然后再对fileReader和formData做简要介绍。

---

Blob

概念理解

• Blob的全称是 binary large object ，表示二进制大对象，并不是前端的特有对象，而是计算机界的通用术语，MySql/Oracle数据库中，就有一种Blob类型，专门存放二进制数据。
• MDN中官方的解释是：一个Blob对象就是一个包含有只读原始数据的类文件对象。通俗点，我们可以直接将Blob看做是一个不可修改的二进制文件。

使用

构造函数

直接通过 new Blob() 就可以创建一个Blob对象

var aBlob = new Blob( array, options );

array （可选）：是一个由ArrayBuffer, ArrayBufferView, Blob, DOMString 等对象构成的 Array ，或者其他类似对象的混合体。（暂时可以不用理解，就可以看作是一堆数据）
options（可选）：一个对象，用来
设置Blob的一些属性。主要的是一个type属性，表示Blob的类型（其他暂时也不用管）。
简单来说，就是可以通过向new Blob()传一堆数据，生成一个Blob对象

属性

Blob.size （只读）：Blob对象中包含的数据大小（字节）
Blob.type （只读）：表明该Blob对象所包含数据的MIME类型。例如若为图片，此字段就类似为 image/jpeg。如果类型未知，则该值为空字符串。

方法

Blob只有一个slice方法，实现对文件的分割（注意这里并不违背Blob的只读性，slice只是只是复制指定范围内的Blob数据）。

Blob.slice(start, end ,contentType)

start：开始索引，可以为负数，语法类似于数组的slice方法。默认值为0。
end：结束索引，可以为负数，语法类似于数组的slice方法。默认值为最后一个索引。
contentType：新的Blob对象的MIME类型，这个值将会成为新的Blob对象的type属性的值，默认为一个空字符串。

小结

简单来说，Blob就是一个只读的二进制文件，我们可以知道它的文件大小（size），文件类型（type），并可以对其作出分割（slice）。

---

ArrayBuffer

概念理解

ArrayBuffer的概念和用法相对比较复杂（它本身不复杂，只是使用方式比较丰富），之后会在另外一篇博客作出解释，这里仅做简要说明，主要是理解它的宏观概念。

• ArrayBuffer就是一个二进制数据通用的固定长度容器。通俗点说，就是内存上一段连续的二进制数据。
• 我们可以对ArrayBuffer进行读写，但需要借助它提供的工具TypeArray或DataView

Blob 与 ArrayBuffer 的关系

• 相同点： Blob和ArrayBuffer都是二进制的容器；
• ArrayBuffer：ArrayBuffer更底层，就是一段纯粹的内存上的二进制数据，我们可以对其任何一个字节进行单独的修改，也可以根据我们的需要以我们指定的形式读取指定范围的数据
• Blob：Blob就是将一段二进制数据做了一个封装，我们拿到的就是一个整体，可以看到它的整体属性大小、类型；可以对其分割，但不能了解到它的细节
• 联系：Blob可以接受一个ArrayBuffer作为参数生成一个Blob对象，此行为就相当于对ArrayBuffer数据做一个封装，之后就是以整体的形式展现了
• 应用上的区别：由于ArrayBuffer和Blob的特性，Blo作为一个整体文件，适合用于传输；而只有需要关注细节（比如要修改某一段数据时），才需要用到ArrayBuffer

---

File

概念理解

• File 根据名字很容易理解，就是纯粹的文件。通常，表示我们使用 选择的 FileList 对象，或者是使用拖拽操作搞出的 DataTransfer 对象。
• File 对象也是二进制对象，从属于 Blob；也就是说 File 是 Blob 里的一个小类，Blob 的属性和方法都可以用于 File，而 File 自己也有自己特有的属性和方法。对于 Blob 和 File 都有的属性，推荐使用 Blob 的属性

使用

这里就不做过多介绍了，可以直接参考MDN上的介绍

小结

File 就是 Blob里面的一个小类，继承 Blob 的方法和属性，拥有自己特有的属性。通常表示 里的 FileList 对象

---

FileReader

前面提到Blob对象时一个只读对象，但它是一个二进制对象，如果直接读取就只能拿到一堆01数据，因此需要借助专门的工具来读取，这个工具就是 FileReader。
通过 FileReader 可以将 Blob 读取为不同的格式，具体将在另一篇博文中讲到。

Q：前面提到，ArrayBuffer 也需要借助工具（以 dataView 为例）读取数据，那和 FileReader 有什么区别呢？
A：我理解的，ArrayBuffer 的工具 dataView 只是简单的读取数据，最多就是讲数据转为数字或字符串；但 FileReader 可以看做是多了一道编码的过程，通过FileReader.readAsDataURL(blob) 就是将二进制数据读取并编码为 Base64 格式，FileReader.readAsText(blob) 就是将二进制数据读取并编码为字符串形式。

---

FormData

准确来说，FormData其实与上述内容关系就不大了。它是XMLHttpRequest Level 2添加的一个新的接口，我们可以通过JavaScript用一些键值对来模拟一系列表单控件。FormData的最大优点就是，比起普通的ajax, 使用FormData我们可以异步上传一个二进制文件，而这个二进制文件，就是我们上面讲的Blob对象。

参考：https://www.zhangxinxu.com/wordpress/2013/10/understand-domstring-document-formdata-blob-file-arraybuffer/

---

以上内容转载自：二进制学习——Blob，ArrayBuffer、File、FileReader和FormData的区别_小丸子的城堡