Vue上传图片并预览

1.input用来接收图片，img用来显示图片，让input变成透明并置于img上

      <input class="input_image left" type="file" @change="uploadImage($event)" accept="image/*" />
      <img class="show_input_image left" :src="imgSrc" />

css代码

.show_input_image {
  position: absolute;
  left: 10px;
  width: 130px;
  height: 130px;
}
 .input_image {
  position: relative;
  width: 130px;
  height: 130px;
  background-color: blue;
  z-index: 999;
  opacity: 0;
}

2.再uploadImage中实现预览

   uploadImage(e) {
      //上传图片并预览
      let file = e.target.files[0]; //获取第一个文件
      let img = new FileReader();
      img.readAsDataURL(file);
      console.log("img:",img)
      img.onload = ({ target }) => {
        this.imgSrc = target.result; //将img转化为二进制数据
        console.log("target:",target)
      };
    }