使用 JavaScript 将 Blob 转换为文件对象

Question

有时，您会得到一个 Blob 对象，而您想得到的是 File。例如，当您在响应对象 blob() 上使用时 fetch 。在本快速教程中，我们将探索如何将 Blob 转换为 File。

Fetch

下面的脚本将 fetch 响应转换为 Blob 。

fetch('./image.jpeg')
    .then((res) => res.blob())
    .then((myBlob) => {
        console.log(myBlob);
        // logs: Blob { size: 1024, type: "image/jpeg" }
    });

但如果我们想要一个呢File ？

Blob a 和 a之间的主要区别File 在于，File 具有name 和lastModified 属性，它从中继承了所有其他属性Blob 。

我们可以采取两种方式，要么我们将这两个属性添加到 ，使其Blob 看起来像File 。或者我们创建一个实际的File 实例。

让 Blob 看起来像文件

让我们将这两个属性添加到我们的Blob 实例（来自上面的请求的实例fetch ）中。

myBlob.name = 'image.jpeg';
myBlob.lastModified = new Date();

我们的Blob 现在看起来像一个File 但它不是一个真正的File ，我们可以轻松地检查这一点：

console.log(myBlob instanceof File);
// logs: false

console.log(myBlob);
// logs: Blob { name: "image.jpeg", lastModified: ..., size: 1024, type: "image/jpeg" }

如果我们将其与需要实际对象的第三方脚本一起使用，则可能会导致问题File 。

创建实际文件

这是更好的方法，它会给我们一个实际的File 对象。

const myFile = new File([myBlob], 'image.jpeg', {
    type: myBlob.type,
});

console.log(myFile);
// logs: File { name: "image.jpeg", lastModified: ..., size: 1024, type: "image/jpeg" }

现在，当我们检查实例时它将是一个File 。

console.log(myFile instanceof File);
// logs: true

但是，由于它继承自 File 对象，因此 Blob 它也将是 File。

console.log(myFile instanceof Blob);
// logs: true

为什么我们要讨论 quack likes a duck 方法？因为 IE11 不支持File 构造函数，所以如果您仍然需要支持 Internet Explorer，那就只能这么做了。