前言：

Blob、ArrayBuffer、File、fileReader、formData這些名詞總是經(jīng)常看到，知道一點又好像不知道，像是同一個東西好像又不是，總是模模糊糊，最近終于下決心要弄清楚。

為了更好的理解每個名詞的意義，本文先用盡量通俗的語言解釋下各自的區(qū)別，大概能在宏觀上區(qū)分之后，再會在其他博文中做單個解釋。

這些名詞里，Blob、ArrayBuffer、File可以歸為一類，它們都是數(shù)據(jù)；而fileReader算是一種工具，用來讀取數(shù)據(jù)；formData可以看做是一個應用數(shù)據(jù)的場景。因此，我們首先著重區(qū)分Blob、ArrayBuffer、File，然后再對fileReader和formData做簡要介紹。

blob

概念理解

Blob的全稱是binary large object，表示二進制大對象，并不是前端的特有對象，而是計算機界的通用術語，MySql/Oracle數(shù)據(jù)庫中，就有一種Blob類型，專門存放二進制數(shù)據(jù)。

MDN中官方的解釋是：一個Blob對象就是一個包含有只讀原始數(shù)據(jù)的類文件對象。通俗點，我們可以直接將Blob看做是一個不可修改的二進制文件。

使用

構造函數(shù)

直接通過new Blob()就可以創(chuàng)建一個Blob對象

var aBlob = new Blob( array, options );

array(可選)：是一個由ArrayBuffer, ArrayBufferView, Blob, DOMString 等對象構成的 Array ，或者其他類似對象的混合體。(暫時可以不用理解，就可以看作是一堆數(shù)據(jù)) options(可選)：一個對象，用來 設置Blob的一些屬性。主要的是一個type屬性，表示Blob的類型(其他暫時也不用管)。 簡單來說，就是可以通過向new Blob()傳一堆數(shù)據(jù)，生成一個Blob對象

屬性

Blob.size(只讀)：Blob對象中包含的數(shù)據(jù)大小(字節(jié)) Blob.type(只讀)：表明該Blob對象所包含數(shù)據(jù)的MIME類型。例如若為圖片，此字段就類似為’image/jpeg‘。如果類型未知，則該值為空字符串。

方法

Blob只有一個slice方法，實現(xiàn)對文件的分割(注意這里并不違背Blob的只讀性，slice只是只是復制指定范圍內的Blob數(shù)據(jù))。

Blob.slice(start, end ,contentType)

start:開始索引，可以為負數(shù)，語法類似于數(shù)組的slice方法。默認值為0。 end:結束索引，可以為負數(shù)，語法類似于數(shù)組的slice方法。默認值為最后一個索引。 contentType：新的Blob對象的MIME類型，這個值將會成為新的Blob對象的type屬性的值，默認為一個空字符串。

小結

簡單來說，Blob就是一個只讀的二進制文件，我們可以知道它的文件大小(size)，文件類型(type)，并可以對其作出分割(slice)。

ArrayBuffer

ArrayBuffer的概念和用法相對比較復雜(它本身不復雜，只是使用方式比較豐富)，之后會在另外一篇博客作出解釋，這里僅做簡要說明，主要是理解它的宏觀概念。

ArrayBuffer就是一個二進制數(shù)據(jù)通用的固定長度容器。通俗點說，就是內存上一段連續(xù)的二進制數(shù)據(jù)。

我們可以對ArrayBuffer進行讀寫，但需要借助它提供的工具TypeArray或DataView

blob與ArrayBuffer的關系

相同點： Blob和ArrayBuffer都是二進制的容器；

ArrayBuffer：ArrayBuffer更底層，就是一段純粹的內存上的二進制數(shù)據(jù)，我們可以對其任何一個字節(jié)進行單獨的修改，也可以根據(jù)我們的需要以我們指定的形式讀取指定范圍的數(shù)據(jù)

Blob：Blob就是將一段二進制數(shù)據(jù)做了一個封裝，我們拿到的就是一個整體，可以看到它的整體屬性大小、類型；可以對其分割，但不能了解到它的細節(jié)

聯(lián)系：Blob可以接受一個ArrayBuffer作為參數(shù)生成一個Blob對象，此行為就相當于對ArrayBuffer數(shù)據(jù)做一個封裝，之后就是以整體的形式展現(xiàn)了

應用上的區(qū)別：由于ArrayBuffer和Blob的特性，Blo作為一個整體文件，適合用于傳輸；而只有需要關注細節(jié)(比如要修改某一段數(shù)據(jù)時)，才需要用到ArrayBuffer

file

概念理解

file根據(jù)名字很容易理解，就是純粹的文件。通常，表示我們使用選擇的FileList對象，或者是使用拖拽操作搞出的DataTransfer對象。

file對象也是二進制對象，從屬于Blob；也就是說file是Blob里的一個小類，Blob的屬性和方法都可以用于file，而file自己也有自己特有的屬性和方法。對于Blob和file都有的屬性，推薦使用Blob的屬性

使用

這里就不做過多介紹了，可以直接參考MDN上的介紹

小結

file就是blob里面的一個小類，繼承Blob的方法和屬性，擁有自己特有的屬性。通常表示里的fileList對象

fileReader

前面提到Blob對象時一個只讀對象，但它是一個二進制對象，如果直接讀取就只能拿到一堆01數(shù)據(jù)，因此需要借助專門的工具來讀取，這個工具就是fileReader。

通過fileReader可以將Blob讀取為不同的格式，具體將在另一篇博文中講到。

Q：前面提到，ArrayBuffer也需要借助工具(以dataView為例)讀取數(shù)據(jù)，那和fileReader有什么區(qū)別呢？ A：我理解的，ArrayBuffer的工具dataView只是簡單的讀取數(shù)據(jù)，最多就是講數(shù)據(jù)轉為數(shù)字或字符串；但fileReader可以看做是多了一道編碼的過程，通過FileReader.readAsDataURL(blob)就是將二進制數(shù)據(jù)讀取并編碼為Base64格式，FileReader.readAsText(blob)就是將二進制數(shù)據(jù)讀取并編碼為字符串形式。

FormData

準確來說，FormData其實與上述內容關系就不大了。它是XMLHttpRequest Level 2添加的一個新的接口，我們可以通過JavaScript用一些鍵值對來模擬一系列表單控件。FormData的最大優(yōu)點就是，比起普通的ajax, 使用FormData我們可以異步上傳一個二進制文件，而這個二進制文件，就是我們上面講的Blob對象。

總結

以上是生活随笔為你收集整理的java filereader blob_二进制学习——Blob，ArrayBuffer、File、FileReader和FormData的区别的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。