vue中input原生上传图片,点击删除

布局

 <el-button type="primary">上传图片</el-button> <br />
 <img :src="pic" class="icon_img" />
 <div class="delBox"  @mouseover='mouseover($event)'  @mouseout="mouseout($event)">
 <span @click="del" class="delText">删除</span>  </div>
 <input  type="file"   @change="getFile($event)"  name="file" accept="image/*"
    class="icon_input"/>

//将input透明度设为0 
.icon_input {
    position: absolute;
    top: 0px;
    left: 0px;
    opacity: 0;
    cursor: pointer;
  }
//鼠标进入  显示删除
.delBox{
    width: 120px;
    height: 40px;
    position: absolute;
    bottom: 15px;
    left: 0; 
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 6;
    opacity: 0;
  }
  .delText{
    color: #fff;
    text-align: center;
    display: block;
    cursor: pointer;
}
.show{
    opacity: 1;
}

获取上传信息，上传到阿里云

 getFile(event) {
      let fileData = event.target.files[0];
      let formData = new FormData();
      formData.append("file", fileData);
      this.$axios.post("地址", formData)
        .then((res) => {
          this.pic = res.data;
        });
    },

鼠标进入显示删除，离开隐藏

 mouseover($event){
      $event.currentTarget.className='delBox show'
    },
    mouseout($event){
       $event.currentTarget.className='delBox'
    },

点击删除，图片消失

 del(){
      this.pic='' 
    },