将 URL 转换为 FileReader.readAsDataURL 的文件或 Blob

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 插件中可用吗？

Answer 1

要将 URL 转换为 FileReader.readAsDataURL() 的 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();

Answer 2

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

Answer 3

对于 @tibor-udvari 出色的 fetch 答案，建议的编辑队列已满，所以我会将我的建议编辑作为新答案发布。

如果返回，此函数从标头中获取内容类型，否则回退到可设置的默认类型。

async function getFileFromUrl(url, name, defaultType = 'image/jpeg'){
  const response = await fetch(url);
  const data = await response.blob();
  return new File([data], name, {
    type: data.type || defaultType,
  });
}

// `await` can only be used in an async body, but showing it here for simplicity.
const file = await getFileFromUrl('https://example.com/image.jpg', 'example.jpg');

Answer 4

试试这个我在转换为 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中使用文件输出流

Answer 5

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

1. 当您的代码具有 chrome 权限时，您只需指定路径即可创建 File instances：

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

   File 是Blob 的子类，因此所有File 实例也是有效的Blobs。 请注意，这需要a platform path, and not a file URL。

2. 是的，FileReader 可用于插件。

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

Answer 6

这是我使用异步等待和承诺的代码

const getBlobFromUrl = (myImageUrl) => {
    return new Promise((resolve, reject) => {
        let request = new XMLHttpRequest();
        request.open('GET', myImageUrl, true);
        request.responseType = 'blob';
        request.onload = () => {
            resolve(request.response);
        };
        request.onerror = reject;
        request.send();
    })
}

const getDataFromBlob = (myBlob) => {
    return new Promise((resolve, reject) => {
        let reader = new FileReader();
        reader.onload = () => {
            resolve(reader.result);
        };
        reader.onerror = reject;
        reader.readAsDataURL(myBlob);
    })
}

const convertUrlToImageData = async (myImageUrl) => {
    try {
        let myBlob = await getBlobFromUrl(myImageUrl);
        console.log(myBlob)
        let myImageData = await getDataFromBlob(myBlob);
        console.log(myImageData)
        return myImageData;
    } catch (err) {
        console.log(err);
        return null;
    }
}

export default convertUrlToImageData;

Answer 7

我知道这是对@tibor-udvari 答案的扩展，但是为了更好地复制和粘贴。

async function createFile(url, type){
  if (typeof window === 'undefined') return // make sure we are in the browser
  const response = await fetch(url)
  const data = await response.blob()
  const metadata = {
    type: type || 'video/quicktime'
  }
  return new File([data], url, metadata)
}

Answer 8

这是使用 vanila.js 和 promise 获取 blob 或文件对象的最简单方法

const fileURL_to_blob = (file_url) => {
  return new Promise((resolve, reject) => {
    let request = new XMLHttpRequest();
    request.open('GET', file_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);
            resolve(e.target.result);
        };
    };
    request.onerror=function(e){
      reject(e);
    }
    request.send();
  });
}