使用 JavaScript 將 Blob 轉換為檔案

Mehvish Ashiq 2022年5月5日
使用 JavaScript 將 Blob 轉換為檔案

本教程說明如何使用 JavaScript 將 blob 轉換為檔案。blob(二進位制大物件)被定義為作為單個實體儲存在資料庫系統中的一小塊二進位制資料。

Blob 的主要用途是儲存影象、視訊和其他多媒體物件。請記住,並非所有資料庫管理系統都支援 blob。

你可以在此處找到有關 blob 的更多資訊。

使用 JavaScript 將 Blob 轉換為檔案

Blob()File() 類似,但有兩個不同之處,即 lastModifiedDatenameBlob() 沒有 lastModifiedDatename

所以,我們有兩個選擇,要麼將這兩個屬性新增到 blob,要麼建立一個實際檔案的例項。讓我們一一看看這兩種情況。

lastModifiedDatename 屬性新增到 blob。

function convertBlobToFile(blob, fileName){
  blob.lastModifiedDate = new Date();
  blob.name = fileName;
  return blob;
}

//Remember, the first parameter of Blob must be an array
var blob = new Blob(["This is the sample data"],
                {type : "text/plain"});

//we are giving a url for an image as second parameter below
var file = convertBlobToFile(blob, "https://bit.ly/3vsUaOe");

console.log(blob instanceof File); //returns false
console.log(blob);

輸出:

false
[object Blob] {
  arrayBuffer: function arrayBuffer() { [native code] },
  lastModifiedDate: [object Date] { ... },
  name: "https://bit.ly/3vsUaOe",
  size: 23,
  slice: function slice() { [native code] },
  stream: function stream() { [native code] },
  text: function text() { [native code] },
  type: "text/plain"
}

請注意,Blob 的行為類似於 File,但不是 File 的例項。讓我們通過建立 File 的例項來練習相同的示例。

JavaScript 程式碼:

//Remember, the first parameter of Blob must be an array
var blob = new Blob(["This is the sample data"],
                {type : "text/plain"});

const file = new File([blob], "https://bit.ly/3vsUaOe", {
  type: blob.type,
});
console.log(file instanceof File); //returns true
console.log(file instanceof Blob); //returns true
console.log(file);

輸出:

true
true
[object File] {
  arrayBuffer: function arrayBuffer() { [native code] },
  lastModified: 1646123706585,
  lastModifiedDate: [object Date] { ... },
  name: "https://bit.ly/3vsUaOe",
  size: 23,
  slice: function slice() { [native code] },
  stream: function stream() { [native code] },
  text: function text() { [native code] },
  type: "text/plain",
  webkitRelativePath: ""
}

在這裡,你可能已經注意到 fileFileBlob 的一個例項,因為 file 繼承了 Blob 的屬性。

Mehvish Ashiq avatar Mehvish Ashiq avatar

Mehvish Ashiq is a former Java Programmer and a Data Science enthusiast who leverages her expertise to help others to learn and grow by creating interesting, useful, and reader-friendly content in Computer Programming, Data Science, and Technology.

LinkedIn GitHub Facebook