前端小技巧：利用Blob對象切片上傳大文件頭條網

2020-12-07 07:51:00 佚名

1.什麼是Blob對象？

Blob對象表示二進制文件的數據內容，並且可以操作二進制文件，因此它常用於讀寫文件。

Blob對象的構造函數Blob()由瀏覽器原生提供，實例化對象如下：

let blob=new Blob(["my name is martin"],{type:"application/json"})

可以看出，Blob構造函數接受兩個參數。

第一個參數是數組，數組元素可以是字符串或二進制文件，用來表示Blob實例對象的數據內容。
第二個參數是配置對象，但是目前該對象只有一個type屬性可提供配置，它的值是一個字符串，表示數據的MIME類型，默認是空字符串，關於MIME類型分類，可以參照以下這張表：

2.Blob對象的屬性和方法

2.1Blob屬性

廢話不多說，先直接打印一個Blob對象給大家看看：

let blob=new Blob(["my name is martin"],{type:"application/json"});
console.log(blob);

可以看出，一個Blob實例對象包含兩個屬性：

size:表示數據的大小
type：表示數據的MIME類型

2.2Blob方法

Blob實例對象只有一個slice方法，這個方法和數組的slice方法很像，都是用來切割數據的，切割完返回一個相同類型的數據。這裡返回的是一個Blob對象。

slice用法詳解

yourBlob.slice(start, end, contentType);

可以看出Blob對象的slice方法包含三個參數:

start:切割起始位置（包含）
end：切割結束位置（不包含）
contentType:返回的新Blob對象的數據類型（默認為空字符串）

上個小例子幫大家理解一下：

切割文件簡易版：

代碼：

let blob=new Blob(["my name is martin"],{type:"application/json"});
let newBlob_1=blob.slice(0,3,"application/json");
let newBlob_2=blob.slice(3,blob.size,"application/json");
console.log(blob);
console.log(newBlob_1);
console.log(newBlob_2);

結果圖：

分析：從結果圖中可以看出，初始Blob對象大小為17，最後被切割成兩個大小為3和14的Blob對象，如果將初始Blob對象的數據看成是一個文件，那麼這段代碼的作用就是直接將一個大文件分片成兩個小文件了。

事實上，文件的分片原理就是這樣，用Blob對象將文件分片是不是很簡單。

3.如何使用Blob對象實現分片上傳

上面說的都是Blob對象的基礎知識點，這一part講的工程實踐應用才是重頭戲。

3.1前置知識點

因為我們工程中很多是基於這個文件選擇器來上傳文件的。

這個文件選擇器返回的是一個FileList類數組對象，其中數組中的每個元素都是一個File實例對象。

而這個File對象其實就是一個特殊的Blob對象實例，它除了繼承了Blob對象所有的屬性和方法，還新增了name和lastModifiedDate這兩個屬性。

File對象用法示例：

 let file=new File(["my name is martin"],"myFile",{type:"text/plain",lastModified:new Date()})
 console.log(file);
//File構造函數接受三個參數:
//第一個參數是數組，表示數據內容 
//第二個參數是文件名
//第三個參數是一個對象，包含type和lastModified屬性