前言：
- 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對象。