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

<template>
    <div class="com-upload-audio" @click="onSelect">
        <div>
            <upload ref="uploadFile" media-type="audio" @file-change="onFileChange"></upload>
            <div class="btn-push" v-show="!filename">
                <i class="iconfont icon_plus"></i>
                <span>{{tips}}</span>
            </div>
            <div class="filename" v-show="filename"><span>{{filename}}</span></div>
            <button class="ui-button submit" v-show="filename">{{$t('common.change')}}</button>
            <a class="btn-clear" v-show="filename" @click.stop="onClear">
                <i class="iconfont icon-close"></i>
            </a>
        </div>
    </div>
</template>
<script>
import Upload from "./Upload";
export default {
    name: "UploadAudio",
    components: {
        Upload
    },
    props: {
        name:String,
        tips: String,
        clear: Boolean
    },
    data() {
        return {
            isClear: false,
            dataURL: "",
            fileName: ""
        };
    },
    computed:{
        filename(){
            if(this.isClear){
                return null
            }
            return this.fileName || this.name
        }
    },
    methods: {
        onSelect() {
            this.$refs.uploadFile.click();
        },
        onClear() {
            this.$refs.uploadFile.clear();
            this.isClear = true
            this.dataURL = "";
            this.fileName = "";
            this.$emit("file-change", null);
        },
        onFileChange(file) {
            this.isClear = false
            this.dataURL = file.dataURL;
            this.fileName = file.name;
            this.$emit("file-change", file);
        }
    }
};
</script>
<style lang="less" scoped>
.com-upload-audio {
    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;

    &:hover {
        > div {
            background-color: rgba(0, 0, 0, 0.5);
        }
        .ui-button {
            display: block;
        }
        .btn-clear {
            display: block;
        }
    }
    > div {
        position: relative;
        display: flex;
        width: 100%;
        height: 100%;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        font-size: 12px;
        color: @color;
    }

    .filename {
        padding: 10px;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        span {
            max-height: 100%;
            overflow: hidden;
            white-space: normal;
            word-break: break-all;
        }
    }

    .icon_plus {
        font-size: 28px;
    }
    .icon-close {
        color: #fff;
        font-size: 12px;
    }
    .ui-button {
        width: 60px;
        display: none;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    .btn-push {
        text-align: center;
        span {
            display: block;
        }
    }
    .btn-clear {
        display: none;
        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>