将URL转换为File或Blob for FileReader.readAsDataURL

Question

参考：FileReader.readAsDataURL

考虑以下示例：

function previewFile(file) {

  var reader  = new FileReader();

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

它指出：

instanceOfFileReader.readAsDataURL（BLOB）;

blob：要从中读取的Blob或文件。

1. 如何将本地文件URL如：'file:///C:/path-to/root.png'传递给readAsDataURL()
2. FileReader()是否可以在Firefox Addon中使用？

Answer 1

此信息截至目前已过时，但无法删除。

1. 只需在代码具有chrome特权时指定路径，即可创建File instances： new File("/path/to/file"); File是Blob的子类，因此所有File实例也是有效的Blobs。请注意，这需要a platform path, and not a file URL。
2. 是的，FileReader可用于插件。

所有Files都有FileReader和window。如果要在非窗口范围内使用它们（如bootstrap.js或代码模块），可以使用nsIDOMFile / nsIDOMFileReader。

Answer 2

要将URL转换为Blob for 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();

Answer 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给我的例子：https://stackoverflow.com/a/24253997/1828637

它有一个小提琴

如果你想采取这个并从中创建一个文件，我认为你会在onloadend中使用file-output-stream

Answer 4

扩展了Felix Turner的回应，以下是我将如何在fetch API中使用此方法。

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