4dkankan_bim/src/components/form/medias/Audio.vue

<template>
    <div class="media" v-if="media.length">
        <i class="iconfont icon-music"></i>
        <span class="music-name">{{ media[0].name }}</span>
    </div>
    <div class="placeholder" @click="file.click()" v-if="!media.length">
        <div class="icon">
            <i class="iconfont icon-add"></i>
            <span>{{ $t('components.uploadAudio') }}</span>
        </div>
        <div class="tips">{{ $t('components.limitFileSize', { file: 'mp3/wav', size: '5' }) }}</div>
        <input ref="file" type="file" style="display: none" accept=".mp3, .wav" @change="onChange" />
    </div>
    <div class="del-btn" v-if="isEdit && notify.media?.[notify.type]?.length" @click="delMedia">
        <i class="iconfont icon-delete"></i>
    </div>
</template>
<script setup>
import { ref, onMounted, inject } from 'vue'
import { checkSizeLimitFree, base64ToDataURL, getMime } from '@/utils/file'
import i18n from '@/i18n'
const { t } = i18n.global
const notify = inject('notify')
const isEdit = inject('isEdit')
const emits = defineEmits(['tips'])
const file = ref(null)
const media = ref([])
const onChange = e => {
    if (!e.target.files.length) {
        return
    }

    let file = e.target.files[0]
    if (!['mp3', 'wav'].includes(getMime(file.name))) {
        emits('tips', t('components.FileSizeTips', { size: '5', file: 'mp3/wav' }))
        return
    }
    if (checkSizeLimitFree(file.size, 5)) {
        let reader = new FileReader()
        reader.onload = function () {
            media.value.push({ src: base64ToDataURL(reader.result), file, name: file.name })
            notify.value.media['audio'] = media.value
        }
        reader.readAsDataURL(file)
    } else {
        emits('tips', t('components.FileSizeTips', { size: '5', file: 'mp3/wav' }))
    }
    e.target.value = ''
}

const delMedia = () => {
    media.value.splice(0, 1)
}
onMounted(() => {
    media.value = notify.value.media?.audio || []
})
</script>
<style lang="scss" scoped>
.del-btn {
    width: 24px;
    height: 24px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    position: absolute;
    cursor: pointer;
    top: 10px;
    right: 10px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    .iconfont {
        font-size: 1em;
    }
}
.placeholder {
    cursor: pointer;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .icon {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        color: rgba(255, 255, 255, 0.6);
        font-size: 14px;
        span {
            margin-top: 10px;
        }
    }
    .tips {
        font-size: 12px;
        padding: 10px;
        position: absolute;
        bottom: 0;
        width: 100%;
        color: rgba(255, 255, 255, 0.3);
    }
}
.media {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .music-name {
        margin-left: 5px;
    }
    .iconfont {
        font-size: 1em;
    }
    .add {
        cursor: pointer;
        font-size: 12px;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 32px;
        line-height: 32px;
        text-align: center;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.1), #000 200%);
        border-radius: 0 0 4px 4px;
        z-index: 10;
        &.disable {
            pointer-events: none;
        }
        span {
            color: #0076f6;
        }
    }
}
</style>