JavaScript の オブジェクト URL を File オブジェクト または Blob オブジェクトに戻す(変換する)方法を紹介します。URL.createObjectURL() の逆を行います。
オブジェクト URL とは
オブジェクトURLは、JavaScriptで下記のようにメゾットを呼び出すことで生成されます。
URL.createObjectURL(object);
URL.createObjectURL() - Web API | MDN
URL.createObjectURL() 静的メソッドは、引数で指定されたオブジェクトを表す URL を含む DOMString を生成します。 URL の寿命は、それを作成したウィンドウ内の document と結び付けられています。 新しいオブジェクト URL は、指定された File オブジェクトか Blob ...
developer.mozilla.org
ファイルを処理したり、ユーザーからファイルを受け取るライブラリなどで、オブジェクトURLで返ってきますが、データを処理したいからFileオブジェクトやBlobオブジェクトに戻したいということが極稀にあります。
しかし、File APIにはURL.createObjectURL(object);の逆が用意されていません。
少なくとも react-dropzone というReactのライブラリではオブジェクトURLで返ってきました。(そして困って変換方法を調べていました)
File オブジェクトに戻す方法
なんの変哲もない対処方法なのですが、URLなので、 fetch() または XMLHttpRequest を使用すればFileオブジェクトに戻すことができます。
fetch()を用いた方法
ES5が動作する環境であればfetch()を用いた方法がおすすめです。
Can I Useによると、IE以外であれば動作するようです。IEでもpolyfillを導入したり、トランスコンパイラを用いれば動作します。
Can I use... Support tables for HTML5, CSS3, etc
"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.
caniuse.com
let file = await fetch(url).then(r => r);
let blob = await fetch(url).then(r => r.blob());
XMLHttpRequestを用いた方法
レガシーですが、XMLHttpRequestを用いても取得できます。
Can I Useによると、現在の主要ブラウザはすべて動作するようです。
Can I use... Support tables for HTML5, CSS3, etc
"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.
caniuse.com
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'blob';
xhr.onload = function() {
var blob = this.response;
};
xhr.send();
コメント