如何 console.log() 一个 Blob 对象？答案

【问题标题】：How can I console.log() a Blob object?如何 console.log() 一个 Blob 对象？
【发布时间】：2015-02-26 21:50:53
【问题描述】：

我有一个 Blob 对象，我想通过记录它的值来检查它。我只能看到type 和size 属性。有没有办法做到这一点？

【问题讨论】：

你用的是什么浏览器？
我正在使用 Chrome 39（截至目前最新）
不能直接查看blob对象内的数据，必须使用FileReader's readDataAs*方法
谢谢帕特里克。仍然有麻烦。不完全确定为什么这个问题被否决了 - 有人可以给我看另一个 stackoverflow 问题或涵盖该主题的博客吗？

标签： javascript blob console.log

【解决方案1】：

使用 FileReader 查看 blob 内容的基本示例

var html= ['<a id="anchor">Hello World</a>'];
var myBlob = new Blob(html, { type: 'text/xml'});
var myReader = new FileReader();
myReader.onload = function(event){
    console.log(JSON.stringify(myReader.result));
};
myReader.readAsText(myBlob);

【讨论】：

【解决方案2】：

首先我们应该创建一个将 blob 转换为 base64 的函数：

const blobToBase64 = blob => {
  const reader = new FileReader();
  reader.readAsDataURL(blob);
  return new Promise(resolve => {
    reader.onloadend = () => {
      resolve(reader.result);
    };
  });
};

那么我们就可以通过这个函数来使用console.log：

blobToBase64(blobData).then(res => {
  console.log(res); // res is base64 now
  // even you can click on it to see it in a new tab
});

【讨论】：