Vue上传图片并预览

时间:2025-04-21 17:38:08

用来接收图片,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 = [0]; //获取第一个文件
      let img = new FileReader();
      (file);
      ("img:",img)
       = ({ target }) => {
         = ; //将img转化为二进制数据
        ("target:",target)
      };
    }