Question

有以下代码：

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

blob是＆＃39; blob:http://localhost:3000/e3c23a22-75b1-4b83-b39a-75104d1909b9＆＃39;我收到了以下错误：

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

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

Answer 1

我知道这是一个老问题，但是最近我遇到了这个问题，花了我一段时间才解决。因此，如果有人再次遇到该问题，我将回答该问题。

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

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

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

所以您需要做的是：

恢复用于创建 Blob URL

Blob对象

使用readAsDataURL将恢复的 Blob对象转换为base64网址

这是我在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();

Answer 2

您需要从上传器传入整个文件对象，而不仅仅是blob网址。整个文件对象我指的是名称，类型，网址等。

基本上，如果上传者在数组中有一个文件，即files[0]，则会传入readAsDataURL(files[0])。

Answer 3

这里没有关于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);
    }
}

JS将blob url转换为Base64文件

3 个答案: