The avatar-uploader type of the el-upload component is combined with a custom image deletion style
Custom picture delete style (only one picture here)
Effect display:
code
<div v-if="imgType === 'avatar'" class="avatarUp">
<el-upload
class="avatar-uploader"
:action="action"
accept="image/*"
:headers="headers"
:show-file-list="false"
:on-success="handleAvatarSuccess"
>
<img
v-if="imageUrl"
:src="imageUrl"
class="avatar"
>
<i
v-else
class="el-icon-plus avatar-uploader-icon"
/>
</el-upload>
<div v-if="imageUrl" class="imgDelete" @click="deleteHandler">×</div>
</div>
.avatarUp{
position: relative;
width: 150px;
overflow: hidden;
.imgDelete {
width: 30px;
height: 30px;
position: absolute;
top: -12px;
left: 130px;
background-color: rgba($color: #000000, $alpha: 0.5);
border-radius: 20px;
box-sizing: border-box;
padding: 5px 7px 0;
text-align: left;
font-size: 14px;
color: #fff;
cursor: pointer;
}
}
Write the upload component and echo the image by yourself, and call the upload file api (mobile terminal)
Effect display:
Code:
<div class="camera">
<div class="image_item" v-for="(item, index) in fileList" :key="index">
<van-image :src="item" fit="cover" lazy-load @click="previewHandler(index)">
<template v-slot:error>加载失败</template>
<template v-slot:loading>
<van-loading type="spinner" size="20" />
</template>
</van-image>
<div class="delete" @click="deleteHandler(index)">×</div>
</div>
<div class="camera_icon">
<img src="@/assets/images/camera.png" @click="uploadHandler" />
</div>
</div>
.camera {
display: flex;
flex-wrap: wrap;
padding-left: 10px;
.imgStyle {
width: $imgWidth;
height: $imgHeight;
margin-right: 10px;
margin-bottom: 10px;
}
.image_item {
@extend .imgStyle;
position: relative;
overflow: hidden;
.delete {
width: 30px;
height: 30px;
background-color: rgba($color: #000000, $alpha: 0.5);
border-radius: 20px;
box-sizing: border-box;
padding: 12px 7px 0;
position: absolute;
top: -12px;
right: -12px;
text-align: left;
font-size: 14px;
color: #fff;
}
}
.van-image {
width: 100%;
height: 100%;
}
.camera_icon {
@extend .imgStyle;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
::v-deep .van-image__error,
::v-deep .van-image__loading {
background-color: #e7e6e6;
}
}