js文件處理—Blob 操作 及 File 說明

https://developer.mozilla.org/zh-CN/docs/Web/API/Blob

一、Blob對象的API：

• 屬性：

1. size： 對象所包含數據的大小（字節）。
2. type：表明該 Blob 對象所包含數據的 MIME 類型。如果類型未知，則該值為空字符串。

• 方法

1. slice()：返回一個新的 Blob 對象，包含了源 Blob 對象中指定范圍內的數據。
2. stream()：返回一個能讀取blob內容的 ReadableStream。
3. text()：返回一個promise且包含blob所有內容的UTF-8格式的 USVString。
4. arrayBuffer()：返回一個promise且包含blob所有內容的二進制格式的 ArrayBuffer 

二、Blob.text() 對象：https://developer.mozilla.org/zh-CN/docs/Web/API/Blob/text

　　返回值：返回一個 promise 對象，以 resolve 狀態返回一個以文本形式包含 blob 中數據的 USVString。並且該數據總是被識別為 UTF-8 格式。

var textPromise = blob.text();

blob.text().then(text => /* 執行的操作…… */);

var text = await blob.text();

 

 

 

---

 

File對象   https://developer.mozilla.org/zh-CN/docs/Web/API/File

一、File 對象來源：

　　1、通常情況下， File 對象是來自用戶在一個 <input> 元素上選擇文件后返回的 FileList 對象,也可以是來自由拖放操作生成的 DataTransfer 對象，或者來自 HTMLCanvasElement 上的 mozGetAsFile() API。

　　    【File 對象是特殊類型的 Blob，file對象的接口繼承了blob對象的屬性和方法】

　　2、File對象除了通過 <input>元素產生外，也可以直接通過 File 構造函數實現。https://developer.mozilla.org/zh-CN/docs/Web/API/File/File

var file = new File(["foo"], "foo.txt", {
  type: "text/plain",
});

　　　　File 構造函數 生成的 file對象和 blob對象，功能上都差不多。所以我們一般很少使用 File 構造函數去生成 file對象。