使用 JavaScript 将 Blob 转换为文件
Mehvish Ashiq
2023年10月12日
本教程说明如何使用 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
的属性。
作者: Mehvish Ashiq