我如何从Blob网址中读取数据？

Question

我必须从Blob网址中将数据读取为字符数组，甚至最好读取为base64字符串，以便以后处理。

例如，我必须阅读的blobUrl是blob:https://localhost:44399/a4775972-6cc8-41a3-af64-1180d9941ab0

实际上，当点击链接时，文件将在我的浏览器中预览。

尝试读取文件时

var blobUrl = document.getElementById("test").value;

var reader = new FileReader();
reader.readAsDataURL(blobUrl);
reader.onloadend = function ()
{
   base64data = reader.result;
   console.log(base64data);
}

我得到错误

Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.

我在这里做错了什么？

readAsDataURL实际上不接受URL作为输入吗？

我该如何解决？

Answer 1

正如spec所说，readAsDataURL仅接受Blob（这是File子类）作为参数。

因此，您需要使用原始Blob文件引用或将URL转换为文件实例。

要将图像URL转换为文件本身，可以执行以下操作。

async function createFile(){
  let response = await fetch('localhost:44399/a4775972-6cc8-41a3-af64-1180d9941ab0');
  let blob = await response.blob();

  return new File([blob], 'put_the_name.jpg', {
    type: 'image/jpeg'
  });
}