JS 将 blob url 转换为 Base64 文件

有如下代码：

console.log(blob);
var reader = new window.FileReader();
reader.onloadend = function() {            
  console.log(reader.result);
};
reader.readAsDataURL(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 编码图像？提前致谢！

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

首先，我认为变量的命名blob很混乱。Blob URL and 斑点对象是不同的东西。这个答案 https://stackoverflow.com/a/30881444/9478849很好地解释了 Blob URL 是什么。我认为你应该将其重命名为如下。

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

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

所以你需要做的是：

1. 恢复斑点对象用于创建Blob URL
2. Use readAsDataURL转换恢复的斑点对象到 base64 网址

这是我找到的代码这个答案 https://stackoverflow.com/a/16179887/9478849:

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();