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

Question

我正在使用File（）构造函数创建文件对象，以便将blob文件上载到服务器。以下代码适用于Chrome浏览器，但适用于Safari和Internet Explorer则失败。

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

代码在这一行中断，并在控制台中得到此错误"FileConstructor不是构造函数"（正在评估"new File（[blob]，File_name，｛type:mimitString｝）"

使用FileReader API是一种替代方法，但我无法解决此问题。

Answer 1

我建议使用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);

它不是一个"文件"，但你可以像以前一样使用它。

Answer 2

根据web"我可以使用吗"Safari不支持new File()构造函数。查看此链接http://caniuse.com/#feat=fileapi

所以我认为你要么使用FileReader，要么使用这里列出的一些polyfillhttps://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

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

还可以看看这个SO答案Safari用什么代替FileReader？

Answer 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);

Answer 4

npm上有一个文件ponyfill，它可以与现代模块导入一起工作。这使得使用变得简单，但您确实需要在使用new File()的每个模块中导入它。

import File from '@tanker/file-ponyfill';
const myFile = new File(['somefiledata'], 'example.txt', { type: 'text/plain'});