Question

我在数据库中保存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);
}

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

任何想法都表示赞赏。

Answer 1

＆＃34;输入＆＃34;是二进制字符串，而不是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]);

Answer 2

A＆＃34;小＆＃34;迟到了，但也许它可以帮助某人（或者甚至是你，如果你有任何机会你也没有弄清楚）...假设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);

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

使用url＆＃34; GET＆＃34;

XMLHttpRequest

将您的请求的响应类型设置为blob（而非json，与您一样在评论中提到）
请求完成（如果response存在，那么就是你不要像你发布的截图那样得到错误！）设置 reader将响应作为base64 dataURL读取并分配 base64指向src。{/ li>的img属性的网址

如果您的代码似乎如此，则从类型为input的DOM file元素中获取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;

那就是它。

无法执行“readAsDataURL＆＃39; on＆＃39; FileReader＆＃39;：参数1的类型不是＆＃39; Blob＆＃39;

2 个答案: