二進制學習——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/