JS-二进制的处理者：Blob

在公司的项目中，多次用到blob对接口返回的二进制数据进行处理，实现下载效果。但都是照葫芦画瓢，所以今天来分析一下其不同的用法

下载文件到本地

通过创建a标签，添加download属性来实现

var blob = new Blob(data) // data为二进制数据
var URL = window.url.createObjectURL(blob)
var a = document.createElement('a')
a.href = URL
a.download = '下载的文件.txt' // 写入文件名
document.body.append(a)

• 由于IE10/11中不支持download，因此可以使用window.navigator.msSaveBlob或window.navigator.msSaveOrOpenBlob来实现下载效果。

  var blob = new Blob(data) // data为二进制数据
  window.navigator.msSaveBlob(blob)

  使用前者仅能实现保存功能，仅提供给用户一个保存按钮；而后者还提供打开功能。

显示上传图片

在项目中，通常也会需要实现上传图片并显示。

// 默认file为blob格式的图片
var img = document.createElement('img')
var URL = window.createObjectURL(file)
img.src = URL
document.body.append(img)
img.onload = function(){
  window.revokeObjectURL(URL) // 释放上一次生成的URL      
}

Blob文件分片上传

var start = 0;
var CHUNK_SIZE = 20; // 分片大小
var size = blob.size
var end = CHUNK_SIZE;
while(start < size){
  upload(blob.slice(start, end)) // upload为上传的方法
  start = CHUNK_SIZE;
  end = end + CHUNK_SIZE;         
}

对Blob数据进行读取，转换为其他格式

利用FileReader的API进行处理

• FileReader.readAsText(blob)   // 转换为text格式
• FileReader.readAsArrayBuffer(blob)  // 转换为arrayBuffer格式
• FileReader.readAsDataURL(blob) // 转换为base64的Data URL格式