javascript - JS 将 blob url 转换为 Base64 文件

Question

有以下代码:

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

blob 是 'blob:http://localhost:3000/e3c23a22-75b1-4b83-b39a-75104d1909b9'，我收到以下错误:

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

如何修复此错误并将 Blob 转换为 Base64 编码图像？提前致谢!

Answer 1

我知道这是一个老问题，但我最近遇到了这个问题，我花了一段时间才解决它。所以我将回答这个问题，以防有人再次遇到这个问题。

首先，我认为变量blob的命名非常困惑。 Blob URL 和 Blob 对象是不同的东西。 This answer很好地解释了 Blob URL 是什么。我认为你应该将其重命名为如下。

var blobUrl = 'blob:http://localhost:3000/e3c2...'

然后，FileReader 的函数readAsDataURL 需要一个Blob 对象作为其参数。你给它的是变量blob，它是一个Blob URL。

所以你需要做的是:

1. 恢复用于创建 Blob URL 的 Blob 对象
2. 使用readAsDataURL将恢复的Blob对象转换为base64 url​​

这是我在 this answer 中找到的代码:

var blob = new Blob(["Hello, world!"], { type: 'text/plain' });
var blobUrl = URL.createObjectURL(blob);

var xhr = new XMLHttpRequest;
xhr.responseType = 'blob';

xhr.onload = function() {
   var recoveredBlob = xhr.response;

   var reader = new FileReader;

   reader.onload = function() {
     var blobAsDataUrl = reader.result;
     window.location = blobAsDataUrl;
   };

   reader.readAsDataURL(recoveredBlob);
};

xhr.open('GET', blobUrl);
xhr.send();