溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
Blob
Blob，Binary Large Object的縮寫，二進制類型的大對象，代表不可改變的原始數據
在計算機中，BLOB常常是數據庫中用來存儲二進制文件的字段類型。
Blob基本用法
Blob對象
Blob對象指的是字節序列，并且具有size屬性，是字節序列中的字節總數，和一個type屬性，它是小寫的ASCII編碼的字符串表示的媒體類型字節序列。
size:以字節數返回字節序列的大小。獲取時，符合要求的用戶代理必須返回一個FileReader或一個FileReaderSync對象可以讀取的總字節數，如果Blob沒有要讀取的字節，則返回0 。
type:小寫的ASCII編碼字符串表示媒體類型Blob。在獲取時，用戶代理必須Blob以小寫形式返回a類型的ASCII編碼字符串，這樣當它轉換為字節序列時，它是可解析的MIME類型，或者是空字符串（0字節）如果是類型無法確定。
構造函數
創建blob對象本質上和創建一個其他對象的方式是一樣的，都是使用Blob() 的構造函數來進行創建。 構造函數接受兩個參數：
第一個參數為一個數據序列，格式可以是ArrayBuffer, ArrayBufferView, Blob, DOMString
第二個參數是一個包含以下兩個屬性的對象
var data1 = "a";
var blob1 = new Blob([data1]);
console.log(blob1); //輸出：Blob {size: 1, type: ""}
var debug = {hello: "world"};
var blob = new Blob([JSON.stringify(debug, null, 2)],{type : 'application/json'});
console.log(blob) // 輸出 Blob(22) {size: 22, type: "application/json"}
// 創建一個8字節的ArrayBuffer，在其上創建一個每個數組元素為2字節的“視圖”
var abf = new ArrayBuffer(8)
var abv = new Int16Array(abf)
var bolb_ArrayBuffer = new Blob(abv, {type : 'text/plain'})
console.log(bolb_ArrayBuffer) //輸出 Blob(4) {size: 4, type: "text/plain"}
slice方法
Blob對象有一個slice方法，返回一個新的 Blob對象，包含了源 Blob對象中指定范圍內的數據。
slice(start, end, contentType)
start： 可選，代表 Blob 里的下標，表示第一個會被會被拷貝進新的 Blob 的字節的起始位置。如果傳入的是一個負數，那么這個偏移量將會從數據的末尾從后到前開始計算。
end： 可選，代表的是 Blob 的一個下標，這個下標-1的對應的字節將會是被拷貝進新的Blob 的最后一個字節。如果你傳入了一個負數，那么這個偏移量將會從數據的末尾從后到前開始計算。
contentType： 可選，給新的 Blob 賦予一個新的文檔類型。這將會把它的 type 屬性設為被傳入的值。它的默認值是一個空的字符串。
var data = "abcdef";
var blob1 = new Blob([data]);
var blob2 = blob1.slice(0,3);
console.log(blob1); //輸出：Blob {size: 6, type: ""}
console.log(blob2); //輸出：Blob {size: 3, type: ""}
slice用于文件分片上傳
分片上傳邏輯如下：
獲取要上傳文件的File對象，根據chunk（每片大小）對文件進行分片
通過post方法輪循上傳每片文件，其中url中拼接querystring用于描述當前上傳的文件信息；post body中存放本次要上傳的二進制數據片段
接口每次返回offset，用于執行下次上傳
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上拼接以下參數，用于記錄上傳偏移
// post body中存放本次要上傳的二進制數據
query = {
fileSize: file.size,
dataSize: chunk,
nextOffset: 0
}
upload(chunks, query, successPerUpload);
}
}
}
// 執行上傳
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中二進制數據
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)
}
}
}
}
}
// 每片上傳成功后執行
function successPerUpload(resp, chunks, query) {
if (resp.isFinish === true) {
alert("上傳成功");
} else {
//未上傳完畢
query.offset = resp.offset;
upload(chunks, query, successPerUpload);
}
}
// 獲取文件二進制數據
function getFileBinary(file, cb) {
var reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onload = function (e) {
if (typeof cb === "function") {
cb.call(this, this.result);
}
}
}
Blob URL
blob協議的url使用時就像平時使用的url一樣，可以作為圖片請求地址，也可以作為文件請求地址。格式：
blob:http://XXX
下面是一個下載文件的示例，直接調用即可實現文件下載
// file是要下載的文件（blob對象）
downloadHandler: function (file, fileName) {
let link = document.createElement('a')
link.href = window.URL.createObjectURL(file)
link.download = fileName
link.click()
window.URL.revokeObjectURL(link.href)
if (navigator.userAgent.indexOf('Firefox') > -1) {
const a = document.createElement('a')
a.addEventListener('click', function (e) {
a.download = fileName
a.href = URL.createObjectURL(file)
})
let e = document.createEvent('MouseEvents')
e.initEvent('click', false, false)
a.dispatchEvent(e)
}
}
在從后臺獲取的數據接口中把返回類型設置為blob
var x = new XMLHttpRequest(); x.responseType = 'blob'; // 返回一個blob對象
Blob URL和Data URL的區別
Blob URL
Data URL
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
