Uploading pictures with FileReader object

Application scenarios ——  To upload pictures

          Native input , Set the size and transparency to 0, Other styles should be designed by yourself

html, Design according to the design drawing

            <div >
              <span>
                <!--  plus   -->
                <img src="@static/images/icon/add_img.png" />
              </span>
              <span> To upload pictures </span>
              <input @change="add_img" id="imgUpdateId" type="file" />
            </div>        

How to add a new picture , Get file Collection to get the type of picture 、 name 、 size , Do some restrictions on uploading pictures , 

    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(" Uploading a picture of your head can only be  JPG/PNG/GIF  Format !");
        return;
      }
      if (!isLt2M) {
        this.$message.error(" The size of the uploaded image cannot exceed  2MB!");
        return;
      }
      reader.readAsDataURL(file);
      var that = this;
      reader.onloadend = function() {
        that.fileLists.push(file); //  For reference  file aggregate 
        that.imgs.push({ img_addr: reader.result }); // For display 
      };
    }

Remember to delete pictures  document.getElementById("imgUpdateId").value = "" ,  Otherwise, you can't upload the picture you just deleted

in order to Better understand FileReader, Make a break and come in  

Get file information

Get the picture information