什么是Blod？

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

Blob的屬性與方法

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

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

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

使用

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

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

Blod下載指定類型文件

指定下載一個html頁面,如果想下載其他文件請在type下指定即可

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

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

FileReader對象的異步方式讀取

首先先介紹一下 FileReader對象

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

FileReader常用屬性與方法

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

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

// 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對象，將獲取的內(nèi)容賦給img.src再將img追加在body，就可以達(dá)到瀏覽效果了。
• 生成的圖片地址是base64的

• 效果圖

總結(jié)

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

最新評論