JavaScript中blob對象和file對象的區(qū)別及相互轉換實例

更新時間：2025年04月03日 10:22:31 作者：遇見很ok

在JavaScript中,File和Blob是Web?API提供的兩個重要對象,用于處理文件和二進制數據,這篇文章主要介紹了JavaScript中blob對象和file對象的區(qū)別及相互轉換的相關資料,需要的朋友可以參考下

前言

在 JavaScript 中，Blob 對象和 File 對象都代表二進制數據，且它們有很多相似之處，但也有一些關鍵的區(qū)別。以下是它們的主要對比：

1. Blob 對象：

Blob 是一種表示不可變的原始數據的類，可以是任意類型的二進制數據。
它通常用于處理文件或其他原始數據類型，比如圖片、音頻、視頻等。
Blob 可以由多個部分組成，也就是說，它可以是一個二進制數據的集合。

創(chuàng)建 Blob 示例：

const blob = new Blob(["Hello, world!"], { type: "text/plain" });

主要特征：

Blob 對象是一個通用的二進制數據容器。
它沒有與文件相關的元數據（如文件名、文件路徑等）。
Blob 主要用于處理大數據，如從服務器獲取的二進制數據流。

2. File 對象：

File 繼承自 Blob，是 Blob 的一個子類，代表的是用戶的文件。
File 對象除了包含與 Blob 相同的二進制數據外，還包含一些額外的屬性，比如文件名和文件路徑等。
通常，File 對象是通過文件選擇器（<input type="file">）或拖放操作從用戶系統中獲取的。

創(chuàng)建 File 示例：

const file = new File(["Hello, world!"], "hello.txt", { type: "text/plain" });

主要特征：

File 是專門設計來表示用戶文件的，具有額外的文件相關信息，如 name（文件名）和 lastModified（最后修改時間）。
它通常用在與文件操作相關的場景，例如文件上傳、下載等。
File 實際上是一個 Blob，因此你可以使用 Blob 上的方法（如 slice）在 File 對象上進行操作。

關鍵區(qū)別：

特性	`Blob`	`File`
繼承關系	`Blob` 是基礎類	`File` 是 `Blob` 的子類
額外元數據	沒有	有：如文件名 `name` 和 `lastModified`
使用場景	用于處理任意的二進制數據	用于表示文件，通常來自用戶文件選擇
創(chuàng)建方式	可以通過代碼直接創(chuàng)建	通常通過文件選擇器或拖放獲取

總結：

Blob 是一個通用的二進制數據容器，不包含文件的元數據；而 File 是 Blob 的擴展，代表著帶有元數據的文件，通常與文件操作相關。

兩個對象進行相互轉換

從 Blob 轉換為 File

可以通過構造 File 對象的方式將 Blob 轉換為 File。File 構造函數接受三個參數：文件內容（通常是一個 Blob），文件名和可選的選項對象（比如文件類型）。

const blob = new Blob(["Hello, world!"], { type: "text/plain" }); 
// 將 Blob 轉換為 File 
const file = new File([blob], "hello.txt", { type: "text/plain" });
console.log(file); // File 對象，包含文件內容、文件名等信息

j

從 File 轉換為 Blob

因為 File 本質上是繼承自 Blob，所以可以直接將 File 對象當作 Blob 對象使用。轉換過程實際上不需要做任何特別的操作。如果你想獲取 File 中的 Blob 數據，可以直接引用 File 對象本身，或者使用 File.slice() 方法創(chuàng)建一個新的 Blob。

const file = new File(["Hello, world!"], "hello.txt", { type: "text/plain" });
 // File 本身就是一個 Blob，可以直接使用 
const blob = file; 

// 或者使用 slice 方法創(chuàng)建一個新的 Blob

 const newBlob = file.slice(0, file.size);

 console.log(blob); // Blob 對象，包含文件的二進制數據

 console.log(newBlob); // 新的 Blob 對象

總結：

從 Blob 轉換為 File 需要通過 File 構造函數，將 Blob 對象作為數據部分傳入。
從 File 轉換為 Blob 可以直接使用 File 對象本身，因為 File 本質上是 Blob 的一個子類。如果需要創(chuàng)建新的 Blob，可以使用 File.slice() 方法。