Преобразование 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 или файл, из которого следует читать.

Как может выглядеть URL локального файла: 'file:///C:/path-to/root.png' передан в readAsDataURL()
Доступен ли FileReader() в Firefox Addon?

Ответ 1

Вы можете создавать экземпляры File просто указав путь, когда ваш код имеет привилегию Chrome:
```
new File("/path/to/file");
```
File является подклассом Blob -объектов, поэтому все экземпляры File также являются допустимыми Blob. Обратите внимание, что для этого требуется путь к платформе, а не URL-адрес файла.
Да, FileReader доступен для дополнений.

File и FileReader доступны во всех window. Если вы хотите использовать их в nsIDOMFile области (например, bootstrap.js или модуль кода), вы можете использовать nsIDOMFile/nsIDOMFileReader.

Ответ 2

Чтобы преобразовать URL-адрес в Blob для FileReader.readAsDataURL(), выполните следующие действия:

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

Ответ 3

Попробуй это, я узнал об этом от @nmaier, когда я сбрасывал конверты в ico: Ну, я действительно не понимаю, что такое буфер массива, но он делает то, что нам нужно:

function previewFile(file) {

  var reader  = new FileReader();

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

Обратите внимание, как я только что изменил ваш readAsDataURL на readAsArrayBuffer.

Вот пример @nmaier дал мне: fooobar.com/questions/277457/...

у него есть скрипка

Если вы хотите взять это и сделать из него файл, я бы подумал, что вы будете использовать file-output-stream в onloadend

Ответ 4

Расширяя ответ Феликса Тернера, вот как я мог бы использовать этот подход с API fetch.

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