vue 上传图片 本地预览

html

<div class="upload-wrapper">
     <input type="file" class="upload-img" @change="getImgUrl" accept="image/png,image/jpeg,image/jpg" />
     <div class="upload-btn">
         <q-icon name="fa fa-plus" class="plus-icon" v-show="!imgShow">
         </q-icon>
         <q-img :src="picBase64" class="" v-show="imgShow" />
     </div>
 </div>

script

// 获取图片base64
    getImgUrl(event) {
      this.file = event.target.files[0];
      var reader = new FileReader();
      reader.readAsDataURL(this.file);
      reader.onload = () => {
        const ImgBase64 = reader.result;
        // 实现预览，实际是拿到图片的base64数据去挂在到图片的src上
        this.picBase64 = ImgBase64;
        this.uploadImage();
      };
      return false;
    },
  // 上传图片
    uploadImage() {
      const formData = new FormData();
      formData.append("token", this.uploadToken);
      formData.append("file", this.file);
      axios
        .post(Url, formData)
        .then((res) => {
          this.imgUpload=true;
          console.log("res=>", res);
        })
        .catch((err) => {
          console.log("err=>", err);
        });
    },