笔记：JS中Blob、File、FileReader、ArrayBuffer、Base64的关系

blob

blob全称binary large object，二进制大对象。不可修改，从Blob中读取内容的唯一方法就是使用FileReader

创建
new Blob(array,options)
array:由 ArrayBuffer、ArrayBufferView、Blob、DOMString 等对象构成的，将会被放进 Blob
options:它可能会指定如下两个属性
        type:默认值为"“，表示将会被放入到 blob 中的数组内容的 MIME 类型。
        endings:默认值为"transparent”，用于指定包含行结束符\n的字符串如何被写入，不常用。

blob对象有两个属性
    size：包含数据大小（字节）
    type：字符串，MIME类型。如果类型未知，则为空

simple:

分片

Blob对象 内置slice()方法用来将blob对象分片
其有三个参数:
start:设置切片的起点，即切片开始位置。默认值为0，这意味着切片应该从第一个字节开始;
end:设置切片的结束点，会对该位置之前的数据进行切片。默认值为blob.size;
contentType:设置新 blob 的 MIME 类型。如果省略 type，则默认为 blob 的原始值。

File

File对象是特殊类型的Blob
JS中，主要有两种方法来获取File对象：
  （1）<input>元素上选择文件后返回的FileList对象
  （2）文件拖放操作生成的DataTransfer对象

FileReader

上面说了blob不可以修改也无法读取。但是FileReader可以读取Blob里面的内容

有四个方法：

• readAsArrayBuffer()：读取指定Blob内容，完成之后，result属性保存的将是被读取文件的ArrayBuffer对象
• readAsBinaryString()：读取指定Blob内容，完成之后，result属性保存的将是被读取文件的原始二进制数据
• readAsDataURL()：读取指定Blob内容，完成之后，result属性保存的将是包含一个data:URL格式的Base64字符串以表示所读取文件的内容
• readAsText()：读取指定Blob内容，完成之后，result属性保存的将是包含一个字符串以表示所读取的文件内容

ArrayBuffer

特殊的数组。 本身就是一个黑盒，不能直接读写所存储的数据，需要借助以下对象视图读写

Object URL

表示File Object 或 Blob Object 的 URL

URL.createObjectURL(file)

base64

JS中，有两个函数分别用来处理解码和编码base64字符串

• atob()：解码一个Base64字符串
• btoa()：字符串或二进制数据编码成一个base64字符串

主要使用：
①将canvas画布内容生成base64图片
②将获取的图片文件，生成base64图片

总结

需要对二进制数据进行操作的时候就可以使用ArrayBuffer，通过ArrayBuffer创建Blob，通过FileReader读取内容

该笔记于看b站up主：我们一起学前端 所做