二进制学习——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根据名字很容易理解，就是纯粹的文件。一般，表示咱们使用<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读取为不一样的格式，具体将在另外一篇博文中讲到。

  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/