布局
<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=''
},