Blob
Blob(binary large object)，二進(jìn)制類文件大對象吩抓，是一個(gè)可以存儲二進(jìn)制文件的“容器”涉茧，HTML5中的Blob對象除了存放二進(jìn)制數(shù)據(jù)外還可以設(shè)置這個(gè)數(shù)據(jù)的MIME類型。File接口基于Blob疹娶，繼承了 blob 的功能并將其擴(kuò)展使其支持用戶系統(tǒng)上的文件。
new Blob([data], {type: "application/octet-binary"})
Blob構(gòu)造函數(shù)接受兩個(gè)參數(shù)钳垮，第一個(gè)參數(shù)是一個(gè)包含實(shí)際數(shù)據(jù)的數(shù)組惑淳，第二個(gè)參數(shù)是數(shù)據(jù)的MIME類型饺窿。
Blob.size
blob對象的數(shù)據(jù)大小
Blob.type
表示blob對象所包含數(shù)據(jù)的MIME類型。如果實(shí)例化時(shí)未指明類型肚医，則該值為空字符串。
- 簡單介紹下MIME和擴(kuò)展名的區(qū)別：
MIME類型(多用途互聯(lián)網(wǎng)郵件擴(kuò)展Multipurpose Internet Mail Extensions)：標(biāo)識郵件和http請求的網(wǎng)絡(luò)數(shù)據(jù)格式肠套，。
擴(kuò)展名：操作系統(tǒng)中標(biāo)識文件瓷耙，刁赖。
Blob.slice
相當(dāng)于數(shù)組Array.slice方法，表示截取指定范圍的數(shù)據(jù)宇弛，形成新的blob對象。
圖片選擇與下載
<input type="file" value="點(diǎn)我" id="inputImg" onchange="changeHandle(this)">
<img id="image">
let changeHandle = (file) =>{
var reader = new FileReader();
reader.onload = function(evt){
document.getElementById('image').src = evt.target.result;
image = evt.target.result;
}
// 讀Blob為base64
reader.readAsDataURL(file.files[0]);
}
下載簡例
let changeHandle = (file) =>{
// 轉(zhuǎn)化為url下載地址
let url = URL.createObjectURL(file.files[0])
let a = document.createElement('a')
a.setAttribute('download', '圖片')
a.href = url
a.click()
}
實(shí)戰(zhàn)
axios.get('https://xxxxxx', {responseType: 'blob'})
.then(res => {
let url = URL.createObjectURL(res.data)
let a = document.createElement('a')
a.setAttribute('download', '圖片')
a.href = url
a.click()
})
window.URL.createObjectURL（）轿钠，該方法接受File對象和Blob對象病苗，
ArrayBuffer
ArrayBuffer對象表示內(nèi)存中一段原始的二進(jìn)制數(shù)據(jù)容器（緩沖區(qū)），具體介紹請參考以下鏈接瞒斩。
http://javascript.ruanyifeng.com/stdlib/arraybuffer.html
總結(jié)
- Blob和ArrayBuffer都能存儲二進(jìn)制數(shù)據(jù)破婆。Blob相對而言儲存的二進(jìn)制數(shù)據(jù)大（如File文件對象）。
- ArrayBuffer對象表示原始的二進(jìn)制數(shù)據(jù)緩沖區(qū)胸囱，即在內(nèi)存中分配指定大小的二進(jìn)制緩沖區(qū)（容器），用于存儲各種類型化數(shù)組的數(shù)據(jù)，是最基礎(chǔ)的原始數(shù)據(jù)容器抛丽，無法直接讀取或?qū)懭耄?需要通過具體視圖來讀取或?qū)懭胧尾颍碩ypedArray對象或DataView對象對內(nèi)存大小進(jìn)行讀取或?qū)懭耄籅lob對象表示一個(gè)不可變冤吨、原始數(shù)據(jù)的類文件對象。
- 可以相互轉(zhuǎn)換漩蟆。
Blob => ArrayBuffer
let blob = new Blob([1,2,3,4])
let reader = new FileReader();
reader.onload = function(result) {
console.log(result);
}
reader.readAsArrayBuffer(blob);
ArrayBuffer => Blob
let blob = new Blob([buffer])
- ArrayBuffer是原始的二進(jìn)制數(shù)據(jù)緩沖區(qū)，不能設(shè)置MIME類型叛复；Blob可以儲存大量的二進(jìn)制編碼格式的數(shù)據(jù)扔仓，可以設(shè)置對象的MIME類型。
