web-dev-qa-db-ja.com

FileReader.readAsDataURLのURLをファイルまたはBlobに変換します

リファレンス： FileReader.readAsDataURL

次の例を検討してください。

function previewFile(file) {

  var reader  = new FileReader();

  reader.onloadend = function () {
    console.log(reader.result);
  }
  reader.readAsDataURL(file);
}

状態：

instanceOfFileReader.readAsDataURL（blob）;

blob：読み取り元のBlobまたはFile。

  1. 'file:///C:/path-to/root.png'のようなローカルファイルURLをreadAsDataURL()に渡す方法

  2. FileReader()はFirefoxアドオンで利用できますか？

javascriptfirefox-addonfirefox-addon-restartless
37
erosman

この情報は現在のところ古くなっていますが、削除することはできません。

  1. コードがクロム特権のときにパスを指定するだけで Fileインスタンス を作成できます。

    new File("/path/to/file");

    FileはBlobのサブクラスであるため、すべてのFileインスタンスも有効なBlobsです。これには ファイルURLではなくプラットフォームパス が必要であることに注意してください。

  2. はい、アドオンではFileReaderを使用できます。

FileとFileReaderは、すべてのwindowで使用できます。非ウィンドウスコープ（bootstrap.jsやコードモジュールなど）で使用する場合は、nsIDOMFile/nsIDOMFileReaderを使用できます。

12
nmaier

FileReader.readAsDataURL（）のURLをBlobに変換するには、次のようにします。

var request = new XMLHttpRequest();
request.open('GET', MY_URL, true);
request.responseType = 'blob';
request.onload = function() {
    var reader = new FileReader();
    reader.readAsDataURL(request.response);
    reader.onload =  function(e){
        console.log('DataURL:', e.target.result);
    };
};
request.send();
34
Felix Turner

これを試してくださいicoへの変換をいじっていたときに@nmaierからこれを学びました。

function previewFile(file) {

  var reader  = new FileReader();

  reader.onloadend = function () {
    console.log(reader.result); //this is an ArrayBuffer
  }
  reader.readAsArrayBuffer(file);
}

readAsDataURLをreadAsArrayBufferに変更したことに注目してください。

@nmaierが私に与えた例は次のとおりです。 https://stackoverflow.com/a/24253997/1828637

それはフィドルを持っています

これを取り出してファイルを作成する場合は、onloadendでfile-output-streamを使用すると思います

13
Noitidart

Felix Turnerの応答を拡張して、fetch AP​​Iでこのアプローチをどのように使用するかを示します。

async function createFile(){
  let response = await fetch('http://127.0.0.1:8080/test.jpg');
  let data = await response.blob();
  let metadata = {
    type: 'image/jpeg'
  };
  let file = new File([data], "test.jpg", metadata);
  // ... do something with the file or return it
}
createFile();
4
Tibor Udvari