オブジェクト URL を File または Blob オブジェクトに変換する方法
はじめに
JavaScript のオブジェクト URL を File オブジェクトまたは Blob オブジェクトに戻す(変換する)方法を紹介します。 URL.createObjectURL() の逆を行います。
オブジェクト URL とは
オブジェクト URL は、JavaScript で下記のようにメゾットを呼び出すことで生成されます。
URL.createObjectURL(object);URL.createObjectURL() - Web API | MDN
https://developer.mozilla.org/ja/docs/Web/API/URL/createObjectURL
ファイルを処理したり、ユーザーからファイルを受け取るライブラリなどで、オブジェクト URL で返ってきますが、データを処理したいので File オブジェクトや Blob オブジェクトに戻したいケースがあります。
しかし、File API には URL.createObjectURL(object); の逆が用意されていません。
例えば、 react-dropzone という React のライブラリではオブジェクト URL で返ってきます。
File オブジェクトに戻す方法
なんの変哲もない対処方法なのですが、URL なので、 fetch() または XMLHttpRequest を使用すれば File オブジェクトに戻すことができます。
fetch() を用いた方法
ES5 が動作する環境であれば fetch() を用いた方法がおすすめです。
let file = await fetch(url).then((r) => r);
let blob = await fetch(url).then((r) => r.blob());XMLHttpRequest を用いた方法
古き良き、XMLHttpRequest を用いても取得できます。
Can I Useによると、現在の主要ブラウザはすべて動作するようです。
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.responseType = "blob";
xhr.onload = function () {
var blob = this.response;
};
xhr.send();