用FileReader对象 上传图片

应用场景 —— 上传图片

         原生的 input ，设置大小并把透明度设为0，其他样式自己设计就好

html，根据设计图自己设计即可

            <div >
              <span>
                <!-- 加号 ➕ -->
                <img src="@static/images/icon/add_img.png" />
              </span>
              <span>上传图片</span>
              <input @change="add_img" id="imgUpdateId" type="file" />
            </div>        

新增图片的方法，拿到file集合就可以获取图片的类型、名称、大小，做一些上传图片的限制了， 

    add_img(event) {
      var reader = new FileReader();
      var file = event.target.files[0];
      const isJPG =
        file.type == "image/jpeg" ||
        file.type == "image/png" ||
        file.type == "image/gif";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG/PNG/GIF 格式!");
        return;
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
        return;
      }
      reader.readAsDataURL(file);
      var that = this;
      reader.onloadend = function() {
        that.fileLists.push(file); // 传参用 file集合
        that.imgs.push({ img_addr: reader.result }); //展示用
      };
    }

删除图片的时候要记得 document.getElementById("imgUpdateId").value = "" ， 不然无法上传刚删除的那张图片

为了 更清楚的了解FileReader，打个断点进来看看 

获取文件信息

拿到图片信息