Blob
Blob(binary large object)，二进制类文件大对象，是一个可以存储二进制文件的“容器”，HTML5中的Blob对象除了存放二进制数据外还可以设置这个数据的MIME类型。File接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
new Blob([data], {type: "application/octet-binary"})
Blob构造函数接受两个参数，第一个参数是一个包含实际数据的数组，第二个参数是数据的MIME类型。
Blob.size
blob对象的数据大小
Blob.type
表示blob对象所包含数据的MIME类型。如果实例化时未指明类型，则该值为空字符串。
- 简单介绍下MIME和扩展名的区别：
MIME类型(多用途互联网邮件扩展Multipurpose Internet Mail Extensions)：标识邮件和http请求的网络数据格式，。
扩展名：操作系统中标识文件，。
Blob.slice
相当于数组Array.slice方法，表示截取指定范围的数据，形成新的blob对象。
图片选择与下载
<input type="file" value="点我" id="inputImg" onchange="changeHandle(this)">
<img id="image">
let changeHandle = (file) =>{
var reader = new FileReader();
reader.onload = function(evt){
document.getElementById('image').src = evt.target.result;
image = evt.target.result;
}
// 读Blob为base64
reader.readAsDataURL(file.files[0]);
}
下载简例
let changeHandle = (file) =>{
// 转化为url下载地址
let url = URL.createObjectURL(file.files[0])
let a = document.createElement('a')
a.setAttribute('download', '图片')
a.href = url
a.click()
}
实战
axios.get('https://xxxxxx', {responseType: 'blob'})
.then(res => {
let url = URL.createObjectURL(res.data)
let a = document.createElement('a')
a.setAttribute('download', '图片')
a.href = url
a.click()
})
window.URL.createObjectURL（），该方法接受File对象和Blob对象，
ArrayBuffer
ArrayBuffer对象表示内存中一段原始的二进制数据容器（缓冲区），具体介绍请参考以下链接。
http://javascript.ruanyifeng.com/stdlib/arraybuffer.html
总结
- Blob和ArrayBuffer都能存储二进制数据。Blob相对而言储存的二进制数据大（如File文件对象）。
- ArrayBuffer对象表示原始的二进制数据缓冲区，即在内存中分配指定大小的二进制缓冲区（容器），用于存储各种类型化数组的数据，是最基础的原始数据容器，无法直接读取或写入， 需要通过具体视图来读取或写入，即TypedArray对象或DataView对象对内存大小进行读取或写入；Blob对象表示一个不可变、原始数据的类文件对象。
- 可以相互转换。
Blob => ArrayBuffer
let blob = new Blob([1,2,3,4])
let reader = new FileReader();
reader.onload = function(result) {
console.log(result);
}
reader.readAsArrayBuffer(blob);
ArrayBuffer => Blob
let blob = new Blob([buffer])
- ArrayBuffer是原始的二进制数据缓冲区，不能设置MIME类型；Blob可以储存大量的二进制编码格式的数据，可以设置对象的MIME类型。
