JS中的Blob和ArrayBuffer

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对象。

图片选择与下载

    
    

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类型。