如何从 blob url 中读取数据？

Question

我必须从 blob url 中读取字符数组形式的数据，或者更好的是作为 base64 字符串读取数据供以后处理。

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

实际上，当遵循 link 时，文件会在我的浏览器中预览。

正在尝试读取文件

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 says, readAsDataURL accept Blob only (which is 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 url 中读取数据？

How can i read data from blob url?

javascript

jquery

blob

filereader

bloburls