迹忆客 专注技术分享

本教程说明如何使用 JavaScript 将 blob 转换为文件。blob（二进制大对象）被定义为作为单个实体存储在数据库系统中的一小块二进制数据。

Blob 的主要用途是保存图像、视频和其他多媒体对象。请记住，并非所有数据库管理系统都支持 blob。

你可以在此处找到有关 blob 的更多信息。

使用 JavaScript 将 Blob 转换为文件

Blob() 与 File() 类似，但有两个不同之处，即 lastModifiedDate 和 name。Blob() 没有 lastModifiedDate 和 name。

所以，我们有两个选择，要么将这两个属性添加到 blob，要么创建一个实际文件的实例。让我们一一看看这两种情况。

将 lastModifiedDate 和 name 属性添加到 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: ""
}

在这里，你可能已经注意到 file 是 File 和 Blob 的一个实例，因为 file 继承了 Blob 的属性。