vue使用el-opload只允许上传一张图片同时拥有预览和删除功能

在最近的vue项目,产品要求只能上传一张图片，同时实现预览和删除的功能。使用el-upload照片墙会出现闪动的问题，用户头像上传满足要求，但是没有删除功能，所以我在用户头像上传的基础上手动增加了预览和删除功能，效果如下：

---

1. 复制el-upload上传用户头像代码

<el-form-item label="上传凭证" prop="credentials">
                <el-upload
                        class="avatar-uploader"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :show-file-list="false"
                        :disabled="uploadBoolean"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
 </el-form-item>

2. 手动增加删除和预览功能，并修改对应的样式

<el-form-item label="上传凭证" prop="credentials">
                <el-upload
                        class="avatar-uploader"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :show-file-list="false"
                        :disabled="uploadBoolean"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    <!--页面新增删除和预览-->
                    <span v-if="imageUrl" class="el-upload-list__item-actions">
                        <span class="upload-icon">
                            <span class="el-uploads-span" style="margin-right: 10px;" @click="oploadImgPre">
                                <i class="el-icon-zoom-in"></i>
                            </span>
                            <span class="el-upload-span" @click="oploadImgDel">
                                <i class="el-icon-delete"></i>
                            </span>
                        </span>
                    </span>
                    <el-dialog v-model="oploadDialogVisible" size="tiny">
                        <img width="100%" :src="imageUrl" alt="">
                    </el-dialog>
                </el-upload>
</el-form-item>

<script>
    export default {
        data(){
            return {
                uploadBoolean:false,
                imageUrl: '',
                oploadDialogVisible:false,
            }
        },
        methods:{
        handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
                if(this.imageUrl){
                    this.uploadBoolean = true
                }
            },
            beforeAvatarUpload(file) {
                let types = ['image/jpeg', 'image/jpg', 'image/png'];
                const isJPG = types.includes(file.type);
                const isLt2M = file.size / 1024 / 1024 < 20

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG、JPEG、PNG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 20MB!');
                }
                return isJPG && isLt2M;
            },
            oploadImgPre(){
                this.oploadDialogVisible = true
            },
            oploadImgDel(){
                this.imageUrl = ''
                let _this= this
                setTimeout(function(){
                    console.log(_this)
                    _this.uploadBoolean = false
                },1000)
            },
    }
<style scoped>
    .avatar-uploader >>>.el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .el-upload-list__item-actions:hover span {
        display: inline-block;
    }
    .el-icon-zoom-in:before {
        content: "\E626";
    }
    .el-icon-delete:before {
        content: "\E612";
    }
    .el-upload-list__item-actions:hover {
        opacity: 1;
    }
    .el-upload-list__item-actions {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        cursor: default;
        text-align: center;
        color: #fff;
        opacity: 0;
        font-size: 20px;
        background-color: rgba(0,0,0,.5);
        transition: opacity .3s;
    }
    .avatar-uploader >>>.el-upload:hover {
        border-color: #409EFF;
    }
   .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 150px;
        height: 150px;
        line-height: 150px;
        text-align: center;
    }
    .avatar {
        width: 150px;
        /*height: 150px;*/
        display: block;
    }
    .upload-icon {
        position: absolute;
        top: 50%;
        margin-left: -28px;
        margin-top: -18px;
    }
    .dialogBox >>>.el-dialog{
        top: 30% !important;
        width: 30%;
    }
</style>