快捷導(dǎo)航

JavaScript中blob對(duì)象和file對(duì)象的區(qū)別及相互轉(zhuǎn)換實(shí)例

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

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

前言

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

1. Blob 對(duì)象：

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

創(chuàng)建 Blob 示例：

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

主要特征：

Blob 對(duì)象是一個(gè)通用的二進(jìn)制數(shù)據(jù)容器。
它沒(méi)有與文件相關(guān)的元數(shù)據(jù)（如文件名、文件路徑等）。
Blob 主要用于處理大數(shù)據(jù)，如從服務(wù)器獲取的二進(jìn)制數(shù)據(jù)流。

2. File 對(duì)象：

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

創(chuàng)建 File 示例：

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

主要特征：

File 是專門設(shè)計(jì)來(lái)表示用戶文件的，具有額外的文件相關(guān)信息，如 name（文件名）和 lastModified（最后修改時(shí)間）。
它通常用在與文件操作相關(guān)的場(chǎng)景，例如文件上傳、下載等。
File 實(shí)際上是一個(gè) Blob，因此你可以使用 Blob 上的方法（如 slice）在 File 對(duì)象上進(jìn)行操作。

關(guān)鍵區(qū)別：

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

總結(jié)：

Blob 是一個(gè)通用的二進(jìn)制數(shù)據(jù)容器，不包含文件的元數(shù)據(jù)；而 File 是 Blob 的擴(kuò)展，代表著帶有元數(shù)據(jù)的文件，通常與文件操作相關(guān)。

兩個(gè)對(duì)象進(jìn)行相互轉(zhuǎn)換

從 Blob 轉(zhuǎn)換為 File

可以通過(guò)構(gòu)造 File 對(duì)象的方式將 Blob 轉(zhuǎn)換為 File。File 構(gòu)造函數(shù)接受三個(gè)參數(shù)：文件內(nèi)容（通常是一個(gè) Blob），文件名和可選的選項(xiàng)對(duì)象（比如文件類型）。

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

j

從 File 轉(zhuǎn)換為 Blob

因?yàn)?nbsp;File 本質(zhì)上是繼承自 Blob，所以可以直接將 File 對(duì)象當(dāng)作 Blob 對(duì)象使用。轉(zhuǎn)換過(guò)程實(shí)際上不需要做任何特別的操作。如果你想獲取 File 中的 Blob 數(shù)據(jù)，可以直接引用 File 對(duì)象本身，或者使用 File.slice() 方法創(chuàng)建一個(gè)新的 Blob。

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

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

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

 console.log(blob); // Blob 對(duì)象，包含文件的二進(jìn)制數(shù)據(jù)

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

總結(jié)：

從 Blob 轉(zhuǎn)換為 File 需要通過(guò) File 構(gòu)造函數(shù)，將 Blob 對(duì)象作為數(shù)據(jù)部分傳入。
從 File 轉(zhuǎn)換為 Blob 可以直接使用 File 對(duì)象本身，因?yàn)?nbsp;File 本質(zhì)上是 Blob 的一個(gè)子類。如果需要?jiǎng)?chuàng)建新的 Blob，可以使用 File.slice() 方法。