Blob、URL.createObjectURL、File、FormDate、fileReader

Blob

背景

後端返回的是JSON格式的數據，那麼js能夠直接處理，可是後端若是返回二進制文件流，那麼js是不能夠直接處理的，而Blob的存在，容許咱們經過js直接操做二進制數據。

一個Blob對象就是一個包含有隻讀原始數據的類文件對象。Blob對象中的數據並不必定是js中的原生形式。

Blob對象和File對象均可以看作是存放二進制數據的容器，此外還能夠經過Blob設置二進制數據的MIME類型。 注意：第一個參數是數組。

let blob = new Blob([ data ], {  type: 'application/xlsx' })
複製代碼

File

File接口基於Blob，繼承了Blob的功能，而且擴展支持了用戶計算機上的本地文件，所以咱們能夠像使用Blob同樣使用File對象。

總結：Blob對象是用來接收後端接口返回的二進制文件流，File對象是用戶在一個input元素上選擇文件返回的FileList對象，File對象是特殊類型的Blob，均可以被FileReader、URL.createObjectURL()、createImageBitmap()、XMLHttpRequest.send()處理。

URL.createObjectURL

URL.createObjectURL靜態方法會建立一個DOMString，其中包含一個表示參數中給出的對象URL。這個新的URL指向File對象或Blob對象。每次調用URL.createObjectURL方法時都會建立一個新的URL對象，即便你已經用相同的對象做爲參數建立過。當再也不須要這些URL對象時，每一個對象必須經過調用URL.revokeObjectURL()方法來釋放。瀏覽器會在文檔退出的時候自動釋放它們，可是爲了得到最佳性能和內存使用情況，你應該在安全的時機主動釋放掉它們。

FormData

背景

文件傳輸和普通數據傳輸的數據格式是不一樣的，也就是content-type（文檔屬於什麼MIME類型）是不一樣的，普通的數據類型是application/json，告訴服務器消息主體是序列化的json字符串，直接傳給後臺就能夠了。文件數據類型是multipart/form-data，不能直接傳給服務器，須要用到FormData方法將Content-Type設置爲multipart/form-data同時將File對象以健值對的方式傳遞給服務器，告訴服務器消息主體是表單形式的數據格式，這樣子服務器就知道怎樣分別解析它們。使用FormData的最大優勢就是咱們能夠**異步上傳**一個二進制文件。文件、語音、視頻等都是二進制文件。

FileReader

背景

當後端返回的是一個圖片，我須要將圖片展現在頁面上，由於不是json格式因此沒法直接讀取，這時候就須要用到FileReader方法。

FileReader對象容許Web應用程序**異步讀取**存儲在用戶計算機上的文件(或原始數據緩衝區)的內容，使用File或Blob對象指定要讀取的文件或數據。

下面是一個讀取圖片的例子：

// html
 <input type="file" name="file" id="file"></br>
<input type="button" name="btn" value="讀取圖像" id="btn">
<div id="picBox"><img src="" width="300" height="530" id="img"/></div>
// js
 var flObj=document.getElementById("file")
var btn=document.getElementById("btn");
 btn.οnclick=function()
 {
var file=flObj.files[0]; 
flObj.files[0];    
var fReader=new FileReader();
fReader.readAsDataURL(file)
fReader.οnlοad=function(e)
 {
document.getElementById("img").src= this.result
}
}
複製代碼

用法

• FileReader.readAsArrayBuffer()：開始讀取指定的Blob中的內容，一旦完成，result屬性中保存的將是被讀取文件的ArrayBuffer數據對象。

ArrayBuffer是二進制數組，這個接口的原始設計目的與WebGL有關，所謂WebGL是指瀏覽器與顯卡之間的通訊接口，爲了知足js與顯卡之間大量的、實時的數據交換，傳統的數據格式，須要格式轉化，很是耗時，這時若是數據是二進制這樣子就能夠原封不動地傳入顯卡，腳本的性能就會大幅提高，二進制數組就是在這樣背景下誕生的。

• FileReader.readAsBinaryString() ：開始讀取指定的Blob中的內容。一旦完成，result屬性中將包含所讀取文件的原始二進制數據。
• FileReader.readAsDataURL()：開始讀取指定Blob中的內容。一旦完成，rusult屬性中將包含一個data:URL格式的字符串以表示所讀文件的內容。通常用於讀取本地圖片實現預覽功能，這樣子就能夠減小瀏覽器與服務器的交互。
• FileReader.readAsText()：開始讀取指定的Blob中的內容。一旦完成，reuslt屬性中將包含一個字符串以表示所讀取的文件內容。通常用於讀取類型爲application/json二進制數據。

注意：圖片預覽功能能夠經過FileReader.readAsDataURL()或window.URL.createObjectURL()來實現，若是要讀取後端返回的圖片、音頻、視頻統一用Blob()來處理，而後用window.URL.createObjectURL()這個方法生成一個url，放在src上就能夠實現。

涉及知識點：下載文件(Blob)、異步上傳文件(FormData)、異步讀取文件(FileReader)、生成Blob對象和File對象的url(URL.createObjectURL)

參考文章：www.cnblogs.com/hhhyaaon/p/…