关于blob,arraybuffer的那些坑

今天做一个简单的需求，已知一个图片文件的 arraybuffer，把图片展示在页面上。

操作本来应该很简单：

var blob = new Blob(new Uint8Array(arrayBuffer)) 创建Blob

var url = URL.createObjectURL(blob) 创建url

document.querySelector('img').src = url 把url赋值给img节点的src

但是图片死活显示不出来，也没有报错。因为步骤过于简单，也无从查起，各种搜索、找别人成功使用的案例，最后发现，问题出在

var blob = new Blob(new Uint8Array(arrayBuffer)) 这一步

Blob构造函数官方文档(MDN)

仔细看文档发现，Blob构造器的第一个参数是一个数组，但是它应该是一个普通数组，元素应该是ArrayBuffer,ArrayBufferView这些。

Unit8Array也是数组，但其实是ArrayBufferView的一种，不能直接作为参数使用。

正确的写法应该是 var blob = new Blob([new Uint8Array(arrayBuffer)]) ，用数组括起来。

不括起来，也不会报错，因为Unit8Array也是数组，但是图片是不可能显示出来的。