实现一个小功能，原生js点击图片上传图片并切换

 首先实现功能前我们需要了解什么是FileReader

大概了解一下

FileReader 接口有3个用来读取文件方法返回结果在result中：

• readAs Text 一将文件读取为文本
• readAsDataURL —将文件读取为DataURL
• readAsBinaryString 一将文件读取为二进制编码

样式： 

      action="http://localhost:3000/upload"
      method="post"
      enctype="multipart/form-data"
    >
      for="myfile">"./img/touxiang.png" alt="" />
      >"file" hidden name="myfile" id="myfile" />

 js代码：

 //获取图片地址
    const sum = document.querySelector("form");
    const sumImg = sum.querySelector("img");
    sum.querySelector("input").onchange = function () {
      //file-->路径
       let read = new FileReader(); //读取文件
      if (this.files[0] != undefined) { 
         //这里加一个判断当取消选择图片的时候，防止读取空文件报错
        read.readAsDataURL(this.files[0]);
        console.log(read.readAsDataURL(this.files[0]));
        read.onloadend = function () {
          //监听文件读取完毕事件
          sumImg.src = this.result; //修改img的src
        };
      }
    };

 this.result; 就是我们的读取的结果 是一个base64// 然后我们把base64放到图片的src中，就可以在img上显示图片

什么是 Base64

Base64 是网络中存储和传输的二进制数据的普遍用法。Base64 一个字节只能表示 64 种情况，且编码格式每个字节的前两位都只能是 0，使用剩下的 6 位表示内容。 

格式类似于：

 data:image/webp;base64,UKLGR.......