一次性搞清楚Blob、File、FileReader、ArrayBuffer、Base64

Blob

Blob 全名是(Binary Large Object) 翻译过来就是 二进制类型的大对象 Blob 对象表示一个不可变、原始数据的类文件对象，一个 Blob 对象就是一个包含有只读原始数据的类文件对象。 Blob 对象中的数据并不一定得是 js 中的原生形式。 File 接口基于 Blob ，继承了 Blob 的功能,并且扩展支持了用户计算机上的本地文件。它的存在，允许我们可以通过 JS 直接操作二进制数据。还可以通过 Blob 设置二进制数据的 MIME 类型。

属性

Blob 对象含有两个属性：size 和 type 。

• size 表示数据的大小(单位是字节)
• type 表明该 Blob 对象所包含数据的 MIME 类型。如果类型未知，则该值为空字符串

  

创建 Blob

• 通过构造函数 var aBlob = new Blob( array, options );

  • array：是一个由 ArrayBuffer，ArrayBufferView，Blob，DOMString(DOMStrings会被编码为UTF-8)等对象构成的 数组。

  • options ：一个可选的对象（用于设置Blob对象的属性（如：MIME类型）），包含以下两个属性

    • type:默认值为 ""，它代表了将会被放入到 blob 中的数组内容的 MIME 类型。
    • endings —— 默认值为 "transparent"，用于指定包含行结束符 \n 的字符串如何被写入。 它是以下两个值中的一个：
      1. native：代表行结束符会被更改为适合宿主操作系统文件系统的换行符
      2. transparent，代表会保持 blob 中保存的结束符不变

  创建一个装填DOMString对象的Blob对象

let domStr = '<div> my name is constRen </div>'; // 一个包含 DOMString 的数组
let blob = new Blob([domStr], { type: 'text/html' });  // 得到 blob
console.log('blob',blob);

      创建一个装填ArrayBuffer对象的Blob对象

let abf = new ArrayBuffer(6);
let blob = new Blob([abf], { type: 'text/plain' });
console.log('blob', blob);

      创建一个装填ArrayBufferView对象的Blob对象

let typedArray = new Int8Array(8);
let blob = new Blob([typedArray], { type: 'text/plain' });
console.log('blob', blob);

      通过Blob.slice() 此方法返回一个新的Blob对象，包含了原Blob对象中指定范围内的数据

Blob.slice(start:number, end:number, contentType:string)`;
如：let newData = blob.slice(0, 5, 'text/plain');  // 注意 这儿的text/plain 不再是 一个对象了哦！！！

• start ：开始索引，默认为0，如果传入的是一个负数，那么这个偏移量将会从数据的末尾从后到前开始计算。举例来说，-10 将会是 Blob 的倒数第十个字节。如果传入的 start 的长度大于源 Blob 的长度，那么返回的将会是一个长度为 0 并且不包含任何数据的一个 Blob 对象。
• end ：截取结束索引（不包括end），默认值就是它的原始长度。如果传入了一个负数，那么这个偏移量将会从数据的末尾从后到前开始计算。举例来说， -10 将会是 Blob 的倒数第十个字节
• contentType ：新 Blob 的 MIME 类型，默认为空字符串