js中的Blod、File、FileList、FileReader对象

前端在下载文件的时候经常会使用到Blob、File、FileReader对象，那么它们到底是干嘛的，怎么使？

一、我们可以通过Blob对象直接来操作二进制文件。后端返给我们文件的内容我们就可以用Blob对象来进行读取。
Blob()构造函数接受两个参数，第一个参数为数组，里面可以是字符串或者者二进制对象，第二个参数表示数据的类型。默认是空字符串。

  let obj = {
        name: "yz",
      };
      let blodb= new Blob([JSON.stringify(obj)], { type: "text/html" });
      console.log(blob); //打印的结果看下图

在上图可以看到Blob钩子函数的实例对象的方法和属性：
文件的大小属性：size
文件的类型属性：type
可以复制文件的内容方法：slice(start,end,contenType) 开始值默认为0，结束值为size的大小，但是不包括它本身。

二、File对象本身就代表了一个文件、可以使用Blob对象的地方都可以使用File对象、它继承了Blob对象、我们可以看一个例子：

   <input type="file" id="box" />
    <script>
      let input = document.getElementById("box")
      console.log(input);
      input.onchange = ()=>{
        console.log(input.files); //打印结果如下
      }
       

可以看出生成了一个数组对象。用户选中文件以后浏览器生成了一个数组，其实它们都是File构造函数的实例对象。
我们可以自己使用File()构造函数生成实例文件对象如下：

  let file=new File([{a:"yz"}],"我是File构造函数的实例",{type:"text/html"})
 //  File构造函数的参数和Blob()基本一致。一个参数为一个数组传二进制对象或者字符串，第二个参数为文件名，第三个为文件类型，还可以传文件的修改时间。
    console.log(file); 打印如下图

可以看出我们自己生成的File实例对象，和我们选择文件浏览器生成的实例对象，参数一致，那么就可以知道浏览器生成其实是调用了File构造函数。 在上面三幅图可以看出，File()构造函数是继承了Blob()但是又在其基础上加了一些属性。

三、FileList对象：
FileList对象类似数组的对象，它里面就包括每一个File实例对象。

四、FileReader对象：
FileReader对象可以读取Blob、File实例对象里面的内容。浏览器也提供了原生的构造函数
FileReader()来生成实例。

         var reader=new FileReader()
          console.log(reader) //打印结果如下图

下面是读取文件内容的一个例子：

  <input type="file" onchange="onChange(event)" />
    <script>
      function onChange(event) {
        var file = event.target.files[0];
        var reader = new FileReader();
        reader.onload = function (event) {
          console.log(event.target);//打印出来的文件的内容如下图
        };

        reader.readAsText(file); 
      }