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 对象是不同的东西。这个答案很好地解释了 Blob URL 是什么。我认为你应该将其重命名为如下。

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

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

所以你需要做的是：

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

这是我在这个答案中找到的代码：

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

Answer 2

这里没有关于 xhr 的代码，但可能是您没有正确设置responseType。xhr.responseType = 'blob'之前试试xhr.send()。

另外，除了使用 之外FileReader，以下方法可能更直接：

xhr.onreadystatechange = function(){
    if (this.readyState == 4 && this.status == 200){
        var url = window.URL || window.webkitURL;
        img.src = url.createObjectURL(this.response);
    }
}