寫(xiě)在前面
本篇主要總結(jié)Blob對(duì)象屬性及作用，通過(guò)DEMO介紹Blob對(duì)象的應(yīng)用場(chǎng)景。
Blob對(duì)象
一直以來(lái)，JS都沒(méi)有比較好的可以直接處理二進(jìn)制的方法。而B(niǎo)lob的存在，允許我們可以通過(guò)JS直接操作二進(jìn)制數(shù)據(jù)。
一個(gè)Blob對(duì)象就是一個(gè)包含有只讀原始數(shù)據(jù)的類(lèi)文件對(duì)象。Blob對(duì)象中的數(shù)據(jù)并不一定得是JavaScript中的原生形式。File接口基于Blob，繼承了Blob的功能,并且擴(kuò)展支持了用戶(hù)計(jì)算機(jī)上的本地文件。
Blob對(duì)象可以看做是存放二進(jìn)制數(shù)據(jù)的容器，此外還可以通過(guò)Blob設(shè)置二進(jìn)制數(shù)據(jù)的MIME類(lèi)型。
創(chuàng)建Blob
通過(guò)構(gòu)造函數(shù)
var blob = new Blob(dataArr:Array<any>, opt:{type:string});
dataArray：數(shù)組，包含了要添加到Blob對(duì)象中的數(shù)據(jù)，數(shù)據(jù)可以是任意多個(gè)ArrayBuffer，ArrayBufferView， Blob，或者 DOMString對(duì)象。
opt：對(duì)象，用于設(shè)置Blob對(duì)象的屬性（如：MIME類(lèi)型）
1、創(chuàng)建一個(gè)裝填DOMString對(duì)象的Blob對(duì)象
2、創(chuàng)建一個(gè)裝填A(yù)rrayBuffer對(duì)象的Blob對(duì)象
3、創(chuàng)建一個(gè)裝填A(yù)rrayBufferView對(duì)象的Blob對(duì)象（ArrayBufferView可基于ArrayBuffer創(chuàng)建，返回值是一個(gè)類(lèi)數(shù)組。如下：創(chuàng)建一個(gè)8字節(jié)的ArrayBuffer，在其上創(chuàng)建一個(gè)每個(gè)數(shù)組元素為2字節(jié)的“視圖”）
通過(guò)Blob.slice()
此方法返回一個(gè)新的Blob對(duì)象，包含了原Blob對(duì)象中指定范圍內(nèi)的數(shù)據(jù)
Blob.slice(start:number, end:number, contentType:string)
start：開(kāi)始索引，默認(rèn)為0
end：截取結(jié)束索引（不包括end）
contentType：新Blob的MIME類(lèi)型，默認(rèn)為空字符串
var canvas = document.getElementById("canvas");
canvas.toBlob(function(blob){
console.log(blob);
});
應(yīng)用場(chǎng)景
前面提到，F(xiàn)ile接口基于Blob，繼承了Blob的功能并進(jìn)行了擴(kuò)展，故我們可以像使用Blob一樣使用File對(duì)象。
分片上傳
通過(guò)Blob.slice方法，可以將大文件分片，輪循向后臺(tái)提交各文件片段，即可實(shí)現(xiàn)文件的分片上傳。
分片上傳邏輯如下：
- 獲取要上傳文件的File對(duì)象，根據(jù)chunk（每片大小）對(duì)文件進(jìn)行分片
- 通過(guò)post方法輪循上傳每片文件，其中url中拼接querystring用于描述當(dāng)前上傳的文件信息；post body中存放本次要上傳的二進(jìn)制數(shù)據(jù)片段
- 接口每次返回offset，用于執(zhí)行下次上傳
下面是分片上傳的簡(jiǎn)單實(shí)現(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);
}
}
}
以上是文件分片上傳前端的簡(jiǎn)單實(shí)現(xiàn)，當(dāng)然，此功能還可以更加完善，如后臺(tái)需要對(duì)合并后的文件大小進(jìn)行校驗(yàn)；或者前端加密文件，全部上傳完畢后后端解密校驗(yàn)等，此處不做贅述。
通過(guò)url下載文件
window.URL對(duì)象可以為Blob對(duì)象生成一個(gè)網(wǎng)絡(luò)地址，結(jié)合a標(biāo)簽的download屬性，可以實(shí)現(xiàn)點(diǎn)擊url下載文件
實(shí)現(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í)行后頁(yè)面上會(huì)生成此Blob對(duì)象的地址，點(diǎn)擊后可下載：
查看下載結(jié)果：
通過(guò)url顯示圖片
我們知道，img的src屬性及background的url屬性，都可以通過(guò)接收?qǐng)D片的網(wǎng)絡(luò)地址或base64來(lái)顯示圖片，同樣的，我們也可以把圖片轉(zhuǎn)化為Blob對(duì)象，生成URL（URL.createObjectURL(blob)），來(lái)顯示圖片。
小結(jié)
本文主要介紹了Blob對(duì)象的屬性和使用場(chǎng)景，其實(shí)我們可以看到，Blob對(duì)象作為一個(gè)裝填二進(jìn)制數(shù)據(jù)的基本對(duì)象，其作用也僅僅是一個(gè)容器，而真正的業(yè)務(wù)功能則需要通過(guò)FileReader、URL、Canvas等對(duì)象實(shí)現(xiàn)，之后會(huì)繼續(xù)對(duì)這些對(duì)象的功能和應(yīng)用場(chǎng)景進(jìn)行歸納。
參考資料
[1] MDN_Blob
[2] W3C Working Draft
到此這篇關(guān)于HTML5 Blob對(duì)象的具體使用的文章就介紹到這了,更多相關(guān)HTML5 Blob對(duì)象內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
