Blob
背景
后端返回的是JSON格式的數(shù)據(jù)，那么js可以直接處理，但是后端如果返回二進(jìn)制文件流，那么js是不可以直接處理的，而Blob的存在，允許我們通過js直接操作二進(jìn)制數(shù)據(jù)。
一個(gè)Blob對象就是一個(gè)包含有只讀原始數(shù)據(jù)的類文件對象。Blob對象中的數(shù)據(jù)并不一定是js中的原生形式。
Blob對象和File對象都可以看做是存放二進(jìn)制數(shù)據(jù)的容器，此外還可以通過Blob設(shè)置二進(jìn)制數(shù)據(jù)的MIME類型。 注意：第一個(gè)參數(shù)是數(shù)組。
let blob = new Blob([ data ], { type: 'application/xlsx' })
File
File接口基于Blob，繼承了Blob的功能，并且擴(kuò)展支持了用戶計(jì)算機(jī)上的本地文件，因此我們可以像使用Blob一樣使用File對象。
總結(jié)：Blob對象是用來接收后端接口返回的二進(jìn)制文件流，F(xiàn)ile對象是用戶在一個(gè)<input>元素上選擇文件返回的FileList對象，F(xiàn)ile對象是特殊類型的Blob，都可以被FileReader、URL.createObjectURL()、createImageBitmap()、XMLHttpRequest.send()處理。
URL.createObjectURL
URL.createObjectURL靜態(tài)方法會創(chuàng)建一個(gè)DOMString，其中包含一個(gè)表示參數(shù)中給出的對象URL。這個(gè)新的URL指向File對象或Blob對象。每次調(diào)用URL.createObjectURL方法時(shí)都會創(chuàng)建一個(gè)新的URL對象，即使你已經(jīng)用相同的對象作為參數(shù)創(chuàng)建過。當(dāng)不再需要這些URL對象時(shí)，每個(gè)對象必須通過調(diào)用URL.revokeObjectURL()方法來釋放。瀏覽器會在文檔退出的時(shí)候自動(dòng)釋放它們，但是為了獲得最佳性能和內(nèi)存使用狀況，你應(yīng)該在安全的時(shí)機(jī)主動(dòng)釋放掉它們。
FormData
背景
文件傳輸和普通數(shù)據(jù)傳輸?shù)臄?shù)據(jù)格式是不同的，也就是content-type（文檔屬于什么MIME類型）是不同的，普通的數(shù)據(jù)類型是application/json，告訴服務(wù)器消息主體是序列化的json字符串，直接傳給后臺就可以了。文件數(shù)據(jù)類型是multipart/form-data，不能直接傳給服務(wù)器，需要用到FormData方法將Content-Type設(shè)置為multipart/form-data同時(shí)將File對象以健值對的方式傳遞給服務(wù)器，告訴服務(wù)器消息主體是表單形式的數(shù)據(jù)格式，這樣子服務(wù)器就知道怎樣分別解析它們。使用FormData的最大優(yōu)點(diǎn)就是我們可以異步上傳一個(gè)二進(jìn)制文件。文件、語音、視頻等都是二進(jìn)制文件。
FileReader
背景
當(dāng)后端返回的是一個(gè)圖片，我需要將圖片展示在頁面上，因?yàn)椴皇莏son格式所以無法直接讀取，這時(shí)候就需要用到FileReader方法。
FileReader對象允許Web應(yīng)用程序異步讀取存儲在用戶計(jì)算機(jī)上的文件(或原始數(shù)據(jù)緩沖區(qū))的內(nèi)容，使用File或Blob對象指定要讀取的文件或數(shù)據(jù)。
下面是一個(gè)讀取圖片的例子：
// 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中的內(nèi)容，一旦完成，result屬性中保存的將是被讀取文件的ArrayBuffer數(shù)據(jù)對象。
ArrayBuffer是二進(jìn)制數(shù)組，這個(gè)接口的原始設(shè)計(jì)目的與WebGL有關(guān)，所謂WebGL是指瀏覽器與顯卡之間的通信接口，為了滿足js與顯卡之間大量的、實(shí)時(shí)的數(shù)據(jù)交換，傳統(tǒng)的數(shù)據(jù)格式，需要格式轉(zhuǎn)化，非常耗時(shí)，這時(shí)如果數(shù)據(jù)是二進(jìn)制這樣子就可以原封不動(dòng)地傳入顯卡，腳本的性能就會大幅提升，二進(jìn)制數(shù)組就是在這樣背景下誕生的。
- FileReader.readAsBinaryString() ：開始讀取指定的Blob中的內(nèi)容。一旦完成，result屬性中將包含所讀取文件的原始二進(jìn)制數(shù)據(jù)。
- FileReader.readAsDataURL()：開始讀取指定Blob中的內(nèi)容。一旦完成，rusult屬性中將包含一個(gè)data:URL格式的字符串以表示所讀文件的內(nèi)容。一般用于讀取本地圖片實(shí)現(xiàn)預(yù)覽功能，這樣子就可以減少瀏覽器與服務(wù)器的交互。
- FileReader.readAsText()：開始讀取指定的Blob中的內(nèi)容。一旦完成，reuslt屬性中將包含一個(gè)字符串以表示所讀取的文件內(nèi)容。一般用于讀取類型為application/json二進(jìn)制數(shù)據(jù)。
注意：圖片預(yù)覽功能可以通過FileReader.readAsDataURL()或window.URL.createObjectURL()來實(shí)現(xiàn)，如果要讀取后端返回的圖片、音頻、視頻統(tǒng)一用Blob()來處理，然后用window.URL.createObjectURL()這個(gè)方法生成一個(gè)url，放在src上就可以實(shí)現(xiàn)。
涉及知識點(diǎn)：下載文件(Blob)、異步上傳文件(FormData)、異步讀取文件(FileReader)、生成Blob對象和File對象的url(URL.createObjectURL)
