Safari 和 IE 的 File() 构造函数是否有替代方法？答案

【问题标题】：Is there an alternative for File() constructor for Safari and IE?Safari 和 IE 的 File() 构造函数是否有替代方法？
【发布时间】：2016-02-22 15:25:26
【问题描述】：

我正在使用 File() 构造函数来创建文件对象，以便将 blob 文件上传到服务器。以下代码适用于 Chrome，但不适用于 Safari 和 Internet Explorer。

image_url = new File([blob],file_name,{type: mimeString});

代码在这一行中断并在控制台“FileConstructor 不是构造函数”中出现此错误（评估'new File([blob],file_name,{type: mimeString})'）

使用 FileReader API 可以替代此方法，但我无法解决此问题。

【问题讨论】：

嘿@Johny 我，我发现很多人帮助了我的答案，你会接受它是正确的吗？
好的，谢谢！

标签： angularjs file internet-explorer safari filereader

【解决方案1】：

根据网络“我可以使用”，Safari 不支持 new File() 构造函数。看这个链接http://caniuse.com/#feat=fileapi

所以我认为您必须使用 FileReader 或者使用此处列出的一些 polyfill https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

尤其是这个对你有用https://github.com/mailru/FileAPI（我自己没用过）

也看看这个 SO 答案What to use instead of FileReader for Safari?

【讨论】：

谢谢！！让我尝试一下这些可能的解决方案。
好吧，我正在使用 github.com/danialfarid/ng-file-upload 指令，并使用 shim 文件并提到了跨浏览器支持部分中提到的代码，但我无法在 Safari 上上传文件。
是同样的错误“FileConstructor 不是构造函数（正在评估'new File([blob],file_name,{type: mimeString})'）”
文档说 on demand flash FileAPI shim loading no extra load for html5 browsers. 所以我猜你可能忘了加载/调用那个 FileAPI shim？
<script src="ng-file-upload-shim(.min).js"></script>

【解决方案2】：

我建议使用blob api，我发现了同样的问题，我就这样解决了：

var html = <svg>whatever on svg </svg>
var fileName = "myfile.svg";
var blob = new Blob([html], {type: 'image/svg'});
blob.lastModifiedDate = new Date();
// var blobAttrs = {type: "image/svg"};
// var file = new File([html], fileName, blobAttrs);
var formData = new FormData();
formData.append("file",blob,fileName);

它不是“文件”，但您可以像以前一样使用它。

【讨论】：

感谢您拯救我的一天！
2 年后，这让我不再支持 ios 9.3。

【解决方案3】：

如果你可以使用 ES6 类：

class CustomFile extends Blob
{
    constructor(blobParts, filename, options) {
        super(blobParts, options);
        this.name = filename || "";
        if(options) {
          this.lastModified = options.lastModified;
        }
    }

    lastModified = 0;
    name = "";
}
const blob = new Blob();
const fileObject = new CustomFile([blob],"myfile");

console.log(fileObject);

【讨论】：

【解决方案4】：

有一个文件 ponyfill on npm 适用于现代模块导入。这使使用变得简单，但您确实需要在使用 new File() 的每个模块中导入它。

import File from '@tanker/file-ponyfill';

const myFile = new File(['somefiledata'], 'example.txt', { type: 'text/plain'});

【讨论】：