无法在“FileReader”上执行“readAsDataURL”：参数 1 不是“Blob”类型答案

【问题标题】：Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'无法在“FileReader”上执行“readAsDataURL”：参数 1 不是“Blob”类型
【发布时间】：2016-02-10 22:34:01
【问题描述】：

我正在数据库中保存 blob，我想在 ajax 请求成功后检索它们并显示它们。

function specificreadURL(input) {
    console.log(input)
    var reader = new window.FileReader();
    //reader.readAsArrayBuffer(input);
    reader.readAsDataURL(input);//line with error
    reader.onloadend = function() {
        var base64data = reader.result;
        console.log(base64data);
    };

}

我的代码在上面。输入来自ajax成功。我试图在控制台中打印以查看输入是什么样的。我在控制台中得到这个。

我怎样才能将blob 传递给readAsDataURL() 就像上面的blob 一样
我想将 blob 转换为 base64，以便我可以在图像中使用它。

更新

function specificreadURL(input, type) {
    console.log(input)
    var reader = new window.FileReader();
    reader.readAsDataURL(input);
    reader.onloadend = function() {
        var base64data = reader.result;
        console.log(base64data);
    };
}

for (var j = 0; j < bblobfile.length; j++) {
    var blob = new Blob([bblobfile[j].blob], {
        type: bblobfile[j].type
    });
    specificreadURL(blob, bblobfile[j].type);
}

尝试了上面的代码，它给了我正确的类型，但没有显示图像文件。我认为转换与它有关。

任何想法都值得赞赏。

【问题讨论】：

标签： jquery ajax blob

【解决方案1】：

“输入”是二进制字符串，而不是 blob。

如果您想从 ajax 请求中获取 blob，请执行以下操作：

xhr.responseType = "blob";

但是如果你想兼容旧的浏览器（不支持XHR2），你需要先将其转换为Uint8Array。

var arr = new Uint8Array(input.length);
for (var i = 0; i < input.length; i++){
    arr[i] = input.charCodeAt(i);
}
var blob = new Blob([arr.buffer]);

【讨论】：

在我的 ajax 请求中我返回 json 是否想查看 ajax 请求？我虽然它无关紧要，所以我没有包括在问题中。不仅是blob，还会有其他数据
哦，不好意思，你可以试试第二段代码，把二进制字符串“input”转换成“blob”，然后reader.readAsDataURL(blob);。
先生，如果您感到困惑，我很抱歉。我的代码中的输入是一个 blob，我想将其转换为 base64（类似于"data:application/pdf;base64,JVBERi0xLjQKJeHp69MKMSAwIG9iago8PC9UeXBlIC9DYXR…AKdHJhaWxlcgo8PC9TaXplIDE4Ci9Sb290IDEgMCBSPj4Kc3RhcnR4cmVmCjg4MzEzCiUlRU9G".）我想将其用作 src

【解决方案2】：

晚了“一点”，但也许它可以帮助某人（甚至你，如果你还没有弄清楚的话）......假设url是你的URL，xhr是你的ajax / XMLHttp请求，reader是你的FileReader，img是你的图片，你应该这样写：

var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.responseType = "blob";
xhr.onreadystatechange = function()
  {
  if (xhr.readyState === 4)
    {
    if (((xhr.status === 200) || (xhr.status == 0)) && (xhr.response))
      {
      var reader = new FileReader();
      reader.onloadend = function() {img.src = reader.result;}
      reader.readAsDataURL(xhr.response);
      }
    }
  }
xhr.send(null);

这段代码的作用基本上是：

使用XMLHttpRequest“GET”请求url
将该请求的响应类型设置为blob（不是json，就像你 cmets中提到）
在请求完成时（如果 response 存在，那么您不要像您在发布的屏幕截图中那样出现错误！）设置 reader 将响应读取为 base64 dataURL 并分配您的img 的src 属性的base64 URL。

如果像您的代码一样，您从 file 类型的 DOM input 元素中获取 blob，那么，如果该元素类似于：

<input type="file" id="fileinput">

代码变成：

function readimg()
  {
  var reader = new FileReader();
  reader.onloadend = function() {img.src = reader.result;}
  if (event.target.files[0]) {reader.readAsDataURL(event.target.files[0]);}
  }

document.getElementById('fileinput').onChange = readimg;

就是这样。

【讨论】：