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

Posted 2023-02-15

【中文标题】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 我，我发现很多人帮助了我的答案，你会接受它是正确的吗？

好的，谢谢！

【参考方案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> <!-- for no html5 browsers support -->

【参考方案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');