web-dev-qa-db-ja.com

SafariとIEのFile（）コンストラクターに代わるものはありますか？

サーバーにblobファイルをアップロードするためのファイルオブジェクトを作成するためにFile（）コンストラクターを使用しています。次のコードはChromeでは正常に機能しますが、SafariとInternetExplorerでは失敗します。

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

コードはこの行で壊れており、コンソール「FileConstructorはコンストラクターではありません」でこのエラーが発生します（ 'new File（[blob]、file_name、{type：mimeString}）'を評価しています）

FileReader APIを使用することはこれに代わる方法ですが、この問題を修正することはできません。

angularjsfileinternet-explorersafarifilereader
15
Johny me

私はblobapiを使用することを提案します、私は同じ問題を見つけました、そして私はそのように解決しました：

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

「ファイル」ではありませんが、そのままお使いいただけます。

16
BrunoLoops

ウェブによると「使用できますか」Safariはnew File()コンストラクターをサポートしていません。このリンクを参照してください http://caniuse.com/#feat=fileapi

したがって、FileReaderを使用するか、ここにリストされているポリフィルのいくつかを使用する必要があると思います https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

特にこれはあなたに役立つかもしれません https://github.com/mailru/FileAPI （私はそれを自分で使用しませんでした）

また、これを見てくださいSO回答 Safari用のFileReaderの代わりに何を使用しますか？

2
David Votrubec

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);
0
Marcel Kirsche