什么是Blod？

Blob 對(duì)象表示一個(gè)不可變、原始數(shù)據(jù)的類(lèi)文件對(duì)象,它的數(shù)據(jù)類(lèi)型可以按文本或二進(jìn)制的格式進(jìn)行讀取

Blob的屬性與方法

• size返回一個(gè)File對(duì)象所指代的文件的大小，單位為字節(jié)
• typeBlob 對(duì)象的 type 屬性給出文件的 MIME 類(lèi)型。如果類(lèi)型無(wú)法確定，則返回空字符串。
• arrayBuffer()arrayBuffer() 方法返回一個(gè) Promise 對(duì)象，包含 blob 中的數(shù)據(jù)，并在 ArrayBuffer 中以二進(jìn)制數(shù)據(jù)的形式呈現(xiàn)。
• slice()Blob.slice() 方法用于創(chuàng)建一個(gè)包含源 Blob的指定字節(jié)范圍內(nèi)的數(shù)據(jù)的新 Blob 對(duì)象可以用于大文件上傳;
• stream()Blob接口的stream() 方法返回一個(gè)ReadableStream對(duì)象，讀取它將返回包含在Blob中的數(shù)據(jù)。
• text()text() 方法返回一個(gè) Promise 對(duì)象，包含 blob 中的內(nèi)容，使用 UTF-8 格式編碼
• File 文件（File）接口提供有關(guān)文件的信息，并允許網(wǎng)頁(yè)中的 JavaScript 訪問(wèn)其內(nèi)容

File 對(duì)象是特殊類(lèi)型的 Blob，且可以用在任意的 Blob 類(lèi)型的 context 中。比如說(shuō)， FileReader, URL.createObjectURL(), createImageBitmap() (en-US), 及 XMLHttpRequest.send() 都能處理 Blob 和 File

• FileList 一個(gè) FileList 對(duì)象通常來(lái)自于一個(gè) HTML <input> 元素的 files 屬性，你可以通過(guò)這個(gè)對(duì)象訪問(wèn)到用戶所選擇的文件
• FileReader FileReader 對(duì)象允許Web應(yīng)用程序異步讀取存儲(chǔ)在用戶計(jì)算機(jī)上的文件（或原始數(shù)據(jù)緩沖區(qū)）的內(nèi)容，使用 File 或 Blob 對(duì)象指定要讀取的文件或數(shù)據(jù)
• FileReaderSyncFileReaderSync接口允許以同步的方式讀取File或Blob對(duì)象中的內(nèi)容

使用

var domstr = ['<a id="a"><b id="b">hey!</b></a>']; // 一個(gè)包含DOMString的數(shù)組
var Blob = new Blob(domstr, {type : 'text/html'}); // 得到 blob

domstr 是一個(gè)由ArrayBuffer, ArrayBufferView, Blob, DOMString 等對(duì)象構(gòu)成的 Array ，或者其他類(lèi)似對(duì)象的混合體，它將會(huì)被放進(jìn) Blob。DOMStrings會(huì)被編碼為UTF-8type，默認(rèn)值為 ""，它代表了將會(huì)被放入到blob中的數(shù)組內(nèi)容的MIME類(lèi)型。到這里相信大家都對(duì)Blod應(yīng)該都了解了，開(kāi)始實(shí)踐案例：

Blod下載指定類(lèi)型文件

指定下載一個(gè)html頁(yè)面,如果想下載其他文件請(qǐng)?jiān)趖ype下指定即可

let str = `<a id="a"><b id="b">hey!</b></a>`;
function downloadHtml(str){
     let blob = new Blob({str},{
        type:'text/html'
     })
     let url = URL.createObjectURL(blob);
     let Doma = document.createElement('a');
     Doma.setAttribute('download','index.html');
     Doma.setAttribute('href',url);
     Doma.click();  // 觸發(fā)事件
     Doma.remove(); // 移除本身
}
downloadHtml(str)

Blod對(duì)象中type值根據(jù)自己下載的文件MIME類(lèi)型進(jìn)行定義，上面已經(jīng)介紹過(guò)，然后創(chuàng)建a標(biāo)簽，當(dāng)a標(biāo)簽上存在download屬性的時(shí)候，那href的地址就會(huì)變?yōu)橄螺d地址,再使用createObjectURL可以將blob對(duì)象轉(zhuǎn)化為url，觸發(fā)a標(biāo)簽實(shí)現(xiàn)下載功能

上傳

• createObjectURL同步方式讀取

<input type="file" id="input" >
// js
let input = document.getElementsById('input');
input.onchange = (e)=>{
     const files = e.target.files[0];
     console.log(files)
     let url = URL.createObjectURL(files);
     let img = new Image();
     img.src = url;
     body.appendChild(img)
}

看一下打印的files對(duì)象與url地址

• 我們會(huì)發(fā)現(xiàn)上傳的文件的原型鏈上存在Blob，說(shuō)明繼承Blob,url的地址是存在映射的，當(dāng)我們上傳了文件后會(huì)被存儲(chǔ)起來(lái)，而他后面的UUid對(duì)應(yīng)的就是我們上傳圖片的內(nèi)存地址，這樣我們?cè)夙?yè)面上就可以看到效果了。

FileReader對(duì)象的異步方式讀取

首先先介紹一下 FileReader對(duì)象

FileReader 對(duì)象允許Web應(yīng)用程序異步讀取存儲(chǔ)在用戶計(jì)算機(jī)上的文件（或原始數(shù)據(jù)緩沖區(qū)）的內(nèi)容，使用 File 或 Blob 對(duì)象指定要讀取的文件或數(shù)據(jù)。官方提示FileReader僅用于以安全的方式從用戶（遠(yuǎn)程）系統(tǒng)讀取文件內(nèi)容 它不能用于從文件系統(tǒng)中按路徑名簡(jiǎn)單地讀取文件;

FileReader常用屬性與方法

• FileReader.readyState 狀態(tài)：0還沒(méi)有加載任何數(shù)據(jù),1數(shù)據(jù)正在被加載.,2已完成全部的讀取請(qǐng)求.
• FileReader.result 文件的內(nèi)容。該屬性僅在讀取操作完成后才有效，數(shù)據(jù)的格式取決于使用哪個(gè)方法來(lái)啟動(dòng)讀取操作。
• FileReader.onabort 該事件在讀取操作被中斷時(shí)觸發(fā)
• FileReader.onerror 該事件在讀取操作發(fā)生錯(cuò)誤時(shí)觸發(fā)。
• FileReader.onload 該事件在讀取操作完成時(shí)觸發(fā)。
• FileReader.onloadstart 該事件在讀取操作開(kāi)始時(shí)觸發(fā)。
• FileReader.onloadend 該事件在讀取操作結(jié)束時(shí)（要么成功，要么失?。┯|發(fā)。
• FileReader.onprogress 該事件在讀取Blob時(shí)觸發(fā)。;

還有一些方法就不每個(gè)介紹了，想深入了解的點(diǎn)擊，我們先看下面的例子：

// html
<input type="file" id="input" >
// js
let input = document.getElementById('input');
input.onchange = (e)=>{
     const files = e.target.files[0];
     console.log(files)
     let reader = new FileReader();
     let img = new Image();
     reader.readAsDataURL(files);
     reader.onload = function(){
        //讀取完畢后輸出結(jié)果
        img.src = this.result;
        console.log(this.result);
     }
     document.body.appendChild(img);
}

• 當(dāng)我們觸發(fā)input的onchange事件之后直接獲取files并讀取文件，在創(chuàng)建Img對(duì)象，將獲取的內(nèi)容賦給img.src再將img追加在body，就可以達(dá)到瀏覽效果了。
• 生成的圖片地址是base64的

• 效果圖

總結(jié)

Blob對(duì)于上傳與下載用途都很廣泛，所有上傳的對(duì)象都繼承了Blob,所以上傳后的文件都是只讀的,但是可以通過(guò)Blob對(duì)文件進(jìn)行切割實(shí)現(xiàn)大文件分片上傳，斷點(diǎn)續(xù)傳等操作，下篇文章主要講述如何實(shí)現(xiàn)分片上傳，斷點(diǎn)續(xù)傳。關(guān)于Blob介紹與使用就說(shuō)這么多了，更多關(guān)于Blob對(duì)象實(shí)現(xiàn)文件上傳下載的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論