将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的附加组件？

Answer 1

要将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 2

扩展 Felix Turner 的回应，以下是我将如何将这种方法与fetchAPI 结合使用。

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

试试这个我从@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

Answer 4

@tibor-udvari出色的获取答案的建议编辑队列已满，因此我会将我建议的编辑作为新答案发布。

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

async function getFileFromUrl(url, name, defaultType = 'image/jpeg'){
  const response = await fetch(url);
  const data = await response.blob();
  return new File([data], name, {
    type: response.headers.get('content-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 5

此信息截至目前已过时,但无法删除.

1. 只需在代码具有chrome特权时指定路径,即可创建File实例:

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

   File是一个子类Blob,所以所有File实例都是有效Blob的.请注意,这需要平台路径,而不是文件URL.

2. 是的,FileReader可用于插件.

File并且FileReader可以在所有window的.如果要在非窗口范围(例如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)
}