读取Blob的内容实体

浏览器上数据流的表示形式是一个Blob对象，可访问的属性只有readonly的size和type。所以在浏览器上，一个Blob对象的数据实体内容是读不到的。虽然不知道这种设计的原因是什么，但在websocket接收数据流的时候需要读取数据流字节，所以我尝试实现了一个解析内容的方法。

首先我只需要考虑兼容支持Blob的浏览器，更古老的浏览器直接忽略。

由于知识有限，我想到的办法有两个：

通过FileReader读取blob

<meta charset='utf-8' />
<script>
onerror=function(e){
// 如果Promise或者Blob不支持，你会看到这个报错
alert(e);
};
function parseBlobToArray(blob){
var p=Promise.defer();
try{
 var f=new FileReader;
 f.onload=function(e){
   try{
     p.resolve(new Uint8Array(e.target.result));
   }catch(e){ p.reject(e); }
 };
 f.readAsArrayBuffer(b);
}catch(e){
 p.reject(e);
}
return p.promise;
}
var b=new Blob(['AAAA']); // 创建一个Blob对象
parseBlobToArray(b).then(function(result){
alert(['Data: ',result]); // Data: [65,65,65,65]
},function(e){
alert(['Error: ',e]);
});
</script>

通过xhr读取bloburl

<meta charset='utf-8' />
<script>
onerror=function(e){
// 如果Promise或者Blob不支持，你会看到这个报错
alert(e);
};
function parseBlobToArray(blob){
var p=Promise.defer();
try{
 var f=new XMLHttpRequest;
 f.open('GET',URL.createObjectURL(blob),1);
 f.responseType='arraybuffer';
 f.onreadystatechange=function(){
   if(f.readyState<4)return;
   try{
     p.resolve(new Uint8Array(f.response));
   }catch(e){ p.reject(e); }
 };
 f.send();
}catch(e){
 p.reject(e);
}
return p.promise;
}
var b=new Blob(['AAAA']); // 创建一个Blob对象
parseBlobToArray(b).then(function(result){
alert(['Data: ',result]); // Data: [65,65,65,65]
},function(e){
alert(['Error: ',e]);
});
</script>

兼容性参考列表：

相关文档

暂无

随便看看

畅言模块加载中