在 Microsoft Edge 中实例化文件对象

Question

我正在尝试使用 File API 从 blob 对象创建一个图像文件，然后将其添加到要通过 XHR 发送的表单中。在 chrome 中表现出色，但在 Microsoft Edge 中会导致应用程序崩溃。

let file = new File([blobContent], "image.png");

let form = new FormData();
form.append("file", file);

是否有替代文件 API 的替代方法或将文件附加到表单的变通方法？如果我只是将 blob 添加到表单中，它不会被识别为图像。

谢谢！

Answer 1

目前IE11、Edge支持FileAPI，不支持File构造函数。

在您发布到 caniuse.com 的 link 中，有针对 IE 和 Edge 的注释指出不支持文件构造函数。我遇到了同样的问题，我的解决方法是使用 Blob 而不是 File，然后设置 blob 的类型。

var blob = new Blob([blobContent], {type : 'image/jpeg'});

Answer 2

这就是我所做的工作

// to change Blob to File
private blobToFile(theBlob: Blob, fileName: string): File {
   const b: any = theBlob;
   b.lastModifiedDate = new Date();
   b.name = fileName;
   return b as File;
}

let file;
if (!navigator.msSaveBlob) { // detect if not Edge
   file = new File([b], document.originalName, { type: document.mimeType });
} else {
   file = new Blob([b], { type: document.mimeType });
   file = this.blobToFile(file, document.originalName);
}

现在可以在 Edge 或其他浏览器中将变量文件作为文件继续。

在 Microsoft Edge 中实例化文件对象

Instantiate File object in Microsoft Edge

javascript

fileapi

microsoft-edge