如何从 blob url 读取数据？

Question

我必须将数据作为字符数组读取，或者更好地作为来自 blob url 的 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);
}