qjkankan_v1.1.1/packages/qjkankan-editor/src/components/shared/uploads/UploadImage.vue

<template>
    <div
        class="com-upload-image"
        @click="onSelect"
        :style="{'background-image':(dataSRC?`url(${dataSRC})`:'')}"
        :class="{'no-border':showBorder== false}"
    >
        <div :class="{'has-image':dataSRC,hover:hover}">
            <upload ref="uploadFile" :limit="limit" media-type="image" :accept-type="acceptType" :to-url="toUrl" @file-change="onFileChange"></upload>
            <div class="btn-push" v-show="!dataSRC">
                <i class="iconfont icon-works_add"></i>
                <span>{{tips}}</span>
            </div>
            <div class="btn-change">
                <button class="ui-button submit">{{$t('common.change')}}</button>
                <a class="btn-clear" v-show="showClear" @click.stop="onClear">
                    <i class="iconfont icon-close"></i>
                </a>
            </div>
        </div>
    </div>
</template>
<script>
import Upload from "./Upload";
export default {
    name: "UploadImage",
    components: {
        Upload
    },
    props: {
        src: String,
        tips: String,
        limit:Number,
        acceptType: String,
        hover: {
            type: Boolean,
            default: false
        },
        showClear: {
            type: Boolean,
            default: true
        },
        showBorder: {
            type: Boolean,
            default: true
        },
        showBackground: {
            type: Boolean,
            default: true
        },
        toUrl: {
            type: Boolean,
            default: true
        },
    },
    data() {
        return {
            dataURL: "",
            isClear: false
        };
    },
    computed: {
        dataSRC() {
            if (this.isClear || this.src == "") {
                return null;
            }
            return this.dataURL || this.src || null;
        }
    },
    methods: {
        onSelect() {
            this.$refs.uploadFile.click();
        },
        onClear() {
            this.$refs.uploadFile.clear();
            this.dataURL = "";
            this.isClear = true;
            this.$emit("file-change", null);
        },
        onFileChange(file, base64) {
            this.isClear = false;
            if (this.showBackground) {
                this.dataURL = file.dataURL;
            }
            this.$emit("file-change", file);
        }
    }
};
</script>
<style lang="less" scoped>
.com-upload-image {
    cursor: pointer;
    display: inline-block;
    min-width: 60px;
    min-height: 60px;
    width: 100%;
    height: 100%;
    border-radius: 2px;
    border: 1px solid #5d5d5d;
    position: relative;
    background: #414141;
    background-position: center center;
    background-size: cover;
    &.no-border {
        border: none;
    }
    > div {
        position: relative;
        display: flex;
        width: 100%;
        height: 100%;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        font-size: 12px;
        color: @color;
        &.has-image {
            background-color: rgba(0, 0, 0, 0.5);
            .btn-change {
                display: block;
            }
            &.hover {
                background-color: transparent;
                opacity: 0;
                transition: opacity 0.2s ease-in;
                &:hover {
                    opacity: 1;
                    background-color: rgba(0, 0, 0, 0.5);
                    .btn-change {
                        display: block;
                    }
                }
                .btn-change {
                    display: none;
                }
            }
        }
    }

    .icon-works_add {
        font-size: 28px;
    }
    .icon-close {
        color: #fff;
        font-size: 12px;
    }
    .ui-button {
        width: 60px;
    }
    .btn-push {
        text-align: center;
        span {
            display: block;
        }
    }
    .btn-change {
        display: none;
    }
    .btn-clear {
        position: absolute;
        right: 0;
        top: 0;
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        background-color: #c77a7a;
        border-radius: 50%;
        transform: translate(50%, -50%);
        &:hover {
            background-color: #e85353;
        }
    }
}
</style>