element upload上传单张图片，效果同多图

效果如图：

<template>
    <div class="flex-img">
        <div class="el-upload-list el-upload-list--picture-card" v-show="hideShow">
            <div class="el-upload-list__item is-success">
                <img class="flex-img__image" :src="image">
                <label class="el-upload-list__item-status-label">
                    <i class="el-icon-upload-success el-icon-check">i>
                label>
                <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-delete">
                        <i class="el-icon-delete" @click.stop="handleRemove()">i>
                    span>
                span>
            div>
        div>
        <el-upload
                class="image-uploader"
                :action="uploadUrl"
                :show-file-list="false"
                accept="image/jpeg,image/jpg,image/png"
                :on-success="imageUploadSuccess"
                :before-upload="beforeUpload"
                v-show="!hideShow">
            <i class="el-icon-plus">i>
        el-upload>
        //可以写在这里，也可以写在父组件里，这里我是写在父组件里的
    div>
template>
<script>
    export default {
        props: ['image', 'clearList'],
        data() {
            return {
                uploadUrl: `http://xxxxxxxx`,//图片上传网址
                file: this.image ? this.image : '',
            };
        },
        watch: {
            image(value) {
                this.file = value
                console.log('爷爷', value)
            },
            clearList() {
                this.file = '';
            },
            file(value) {
                console.log('来了', value)
                const list = value;
                this.$emit('update:image', list);
            }
        },
        computed: {
            hideShow() {//当图片多于一张的时候，就隐藏上传框
                return this.file === '' ? false : true
            }
        },
        methods: {
            imageUploadSuccess(response) {
                const {data: {url}} = response
                this.file = url;
            },
            beforeUpload(file) {
                const imageSize = file.size / 1024 / 1024 < 1;//上传图片大小不超过1M
                if (!imageSize) {
                    this.$message.error('上传封面大小不能超过 1MB!');
                }
                return imageSize;
            },
            handleRemove() {
                this.file = '';
            },
        }
    };
script>

<style scoped>
    .flex-img {
        display: flex;
    }

    .image-uploader {
        background-color: #fbfdff;
        border: 1px dashed #c0ccda;
        border-radius: 6px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        width: 148px;
        height: auto;
        cursor: pointer;
        line-height: 146px;
        vertical-align: top;
        text-align: center
    }

    .image-uploader {
        font-size: 28px;
        color: #8c939d;
    }

    .image-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .flex-img__image {
        width: 146px;
        height: auto;

        border-radius: 6px;
    }
style>
<style>
    .disabled {
        display: none;
    }

    .el-upload--picture-card {
        height: auto
    }

    .el-upload-list--picture-card .el-upload-list__item {
        height: auto;
    }

    .el-upload-list--picture-card .el-upload-list__item {
        overflow: hidden;
        background-color: #fff;
        border: 1px solid #c0ccda;
        border-radius: 6px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        width: 148px;
        height: auto;
        margin: 0 8px 8px 0;
        display: inline-block;
    }

    .el-upload-list__item.is-success .el-upload-list__item-status-label {
        display: block;
        position: absolute;
        right: -15px;
        top: -6px;
        width: 40px;
        height: 24px;
        background: #13ce66;
        text-align: center;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        -webkit-box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
        box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
    }

    .el-upload-list--picture-card .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, 0.5);
        -webkit-transition: opacity .3s;
        transition: opacity .3s;
    }
style>