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 convertToFile(url){
  let response = await fetch(url);
  let blob = await response.blob();

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

// usage
async function main() {
  const url = document.getElementById("test").value; // get file URL somehow
  const file = await convertToFile(url); // usage of function above

  const reader = new FileReader();
  reader.readAsDataURL(file);
  ...
}

或者如果您在标记中输入了要上传的文件（这是常见的用例），则可以直接获取文件引用。

var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();

if (file) {
  reader.readAsDataURL(file);
}

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

1 个答案: