寫在前面
本篇主要總結(jié)Blob對象屬性及作用，通過DEMO介紹Blob對象的應(yīng)用場景。
Blob對象
一直以來，JS都沒有比較好的可以直接處理二進(jìn)制的方法。而Blob的存在，允許我們可以通過JS直接操作二進(jìn)制數(shù)據(jù)。
一個Blob對象就是一個包含有只讀原始數(shù)據(jù)的類文件對象。Blob對象中的數(shù)據(jù)并不一定得是JavaScript中的原生形式。File接口基于Blob，繼承了Blob的功能,并且擴(kuò)展支持了用戶計算機(jī)上的本地文件。
Blob對象可以看做是存放二進(jìn)制數(shù)據(jù)的容器，此外還可以通過Blob設(shè)置二進(jìn)制數(shù)據(jù)的MIME類型。
創(chuàng)建Blob
通過構(gòu)造函數(shù)
var blob = new Blob(dataArr:Array<any>, opt:{type:string});dataArray：數(shù)組，包含了要添加到Blob對象中的數(shù)據(jù)，數(shù)據(jù)可以是任意多個ArrayBuffer，ArrayBufferView， Blob，或者 DOMString對象。
opt：對象，用于設(shè)置Blob對象的屬性（如：MIME類型）
1、創(chuàng)建一個裝填DOMString對象的Blob對象
2、創(chuàng)建一個裝填A(yù)rrayBuffer對象的Blob對象
3、創(chuàng)建一個裝填A(yù)rrayBufferView對象的Blob對象（ArrayBufferView可基于ArrayBuffer創(chuàng)建，返回值是一個類數(shù)組。如下：創(chuàng)建一個8字節(jié)的ArrayBuffer，在其上創(chuàng)建一個每個數(shù)組元素為2字節(jié)的“視圖”）
通過Blob.slice()
此方法返回一個新的Blob對象，包含了原Blob對象中指定范圍內(nèi)的數(shù)據(jù)
Blob.slice(start:number, end:number, contentType:string)
start：開始索引，默認(rèn)為0
end：截取結(jié)束索引（不包括end）
contentType：新Blob的MIME類型，默認(rèn)為空字符串
var canvas = document.getElementById("canvas");canvas.toBlob(function(blob){ console.log(blob);});
應(yīng)用場景
前面提到，F(xiàn)ile接口基于Blob，繼承了Blob的功能并進(jìn)行了擴(kuò)展，故我們可以像使用Blob一樣使用File對象。
分片上傳
通過Blob.slice方法，可以將大文件分片，輪循向后臺提交各文件片段，即可實現(xiàn)文件的分片上傳。
分片上傳邏輯如下：
下面是分片上傳的簡單實現(xiàn)：
initUpload();//初始化上傳function initUpload() { var chunk = 100 * 1024; //每片大小 var input = document.getElementById("file"); //input file input.onchange = function (e) { var file = this.files[0]; var query = {}; var chunks = []; if (!!file) { var start = 0; //文件分片 for (var i = 0; i < Math.ceil(file.size / chunk); i++) { var end = start + chunk; chunks[i] = file.slice(start , end); start = end; } // 采用post方法上傳文件 // url query上拼接以下參數(shù)，用于記錄上傳偏移 // post body中存放本次要上傳的二進(jìn)制數(shù)據(jù) query = { fileSize: file.size, dataSize: chunk, nextOffset: 0 } upload(chunks, query, successPerUpload); } }}// 執(zhí)行上傳function upload(chunks, query, cb) { var queryStr = Object.getOwnPropertyNames(query).map(key => { return key + "=" + query[key]; }).join("&"); var xhr = new XMLHttpRequest(); xhr.open("POST", "http://xxxx/opload?" + queryStr); xhr.overrideMimeType("application/octet-stream"); //獲取post body中二進(jìn)制數(shù)據(jù) var index = Math.floor(query.nextOffset / query.dataSize); getFileBinary(chunks[index], function (binary) { if (xhr.sendAsBinary) { xhr.sendAsBinary(binary); } else { xhr.send(binary); } }); xhr.onreadystatechange = function (e) { if (xhr.readyState === 4) { if (xhr.status === 200) { var resp = JSON.parse(xhr.responseText); // 接口返回nextoffset // resp = { // isFinish:false, // offset:100*1024 // } if (typeof cb === "function") { cb.call(this, resp, chunks, query) } } } }}// 每片上傳成功后執(zhí)行function successPerUpload(resp, chunks, query) { if (resp.isFinish === true) { alert("上傳成功"); } else { //未上傳完畢 query.offset = resp.offset; upload(chunks, query, successPerUpload); }}// 獲取文件二進(jìn)制數(shù)據(jù)function getFileBinary(file, cb) { var reader = new FileReader(); reader.readAsArrayBuffer(file); reader.onload = function (e) { if (typeof cb === "function") { cb.call(this, this.result); } }}以上是文件分片上傳前端的簡單實現(xiàn)，當(dāng)然，此功能還可以更加完善，如后臺需要對合并后的文件大小進(jìn)行校驗；或者前端加密文件，全部上傳完畢后后端解密校驗等，此處不做贅述。
通過url下載文件
window.URL對象可以為Blob對象生成一個網(wǎng)絡(luò)地址，結(jié)合a標(biāo)簽的download屬性，可以實現(xiàn)點擊url下載文件
實現(xiàn)如下：
createDownload("download.txt","download file");function createDownload(fileName, content){ var blob = new Blob([content]); var link = document.createElement("a"); link.innerHTML = fileName; link.download = fileName; link.href = URL.createObjectURL(blob); document.getElementsByTagName("body")[0].appendChild(link);}執(zhí)行后頁面上會生成此Blob對象的地址，點擊后可下載：
查看下載結(jié)果：
通過url顯示圖片
我們知道，img的src屬性及background的url屬性，都可以通過接收圖片的網(wǎng)絡(luò)地址或base64來顯示圖片，同樣的，我們也可以把圖片轉(zhuǎn)化為Blob對象，生成URL（URL.createObjectURL(blob)），來顯示圖片。
小結(jié)
本文主要介紹了Blob對象的屬性和使用場景，其實我們可以看到，Blob對象作為一個裝填二進(jìn)制數(shù)據(jù)的基本對象，其作用也僅僅是一個容器，而真正的業(yè)務(wù)功能則需要通過FileReader、URL、Canvas等對象實現(xiàn)，之后會繼續(xù)對這些對象的功能和應(yīng)用場景進(jìn)行歸納。
參考資料
[1] MDN_Blob
[2] W3C Working Draft
到此這篇關(guān)于HTML5 Blob對象的具體使用的文章就介紹到這了,更多相關(guān)HTML5 Blob對象內(nèi)容請搜索武林網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持武林網(wǎng)！
新聞熱點
疑難解答
