Blob、ArrayBuffer、File、fileReader、formData这些名词总是经常看到，

这些名词里，Blob、ArrayBuffer、File可以归为一类，它们都是数据；而fileReader算是一种工具，用来读取数据；formData可以看做是一个应用数据的场景。

arraybuffer与blob的区别

ArrayBuffer对象用来表示通用的、固定长度的原始二进制数据缓冲区。
Blob (binary large object)，他表示一个不可变、原始数据的类文件对象，
blob类型只有slice方法，用于返回一个新的 Blob对象，包含了源 Blob对象中指定范围内的数据。
对比发现，ArrayBuffer的数据，是可以按照字节去操作的，而Blob的只能作为一个整的对象去处理。
所以说，ArrayBuffer相比Blob更接近真实的二进制，更底层。

Blob 与 ArrayBuffer 的关系

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

arraybuffer与blob 相互转换

// arraybuffer转blob很方便，作为参数传入就行了。
 
var buffer = new ArrayBuffer(16)
var blob = new Blob([buffer])

此处需要借助fileReader对象:
 
var blob = new Blob([1,2,3,4,5])
var reader = new FileReader()
 
reader.onload = function() {
    console.log(this.result)
}
reader.readAsArrayBuffer(blob)
 
// 控制台输出的则是ArrayBuffer的数据了。

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

构建一个Blob对象通常有三种方式：

通过Blob对象的构造函数来构建。
从已有的Blob对象调用slice接口切出一个新的Blob对象。
canvas API toBlob方法，把当前绘制信息转为一个Blob对象。下面只看第一种的实现：

File

概念理解

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

使用

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

小结

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

FileReader

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

FormData

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