for_client/src/views/tentative/device/components/HcDragUpload.vue

<template>
    <el-upload ref="uploadRef" :accept="accept" :action="api + action" :auto-upload="autoUpload" :before-upload="beforeUpload"
               :data="uploadData" :disabled="uploadDisabled" :headers="getTokenHeader()" :limit="1" :on-change="uploadChange"
               :on-error="uploadError" :on-exceed="uploadExceed" :on-progress="uploadprogress"
               :on-success="uploadSuccess" :show-file-list="false" class="hc-upload-border approach" drag>
        <div v-loading="uploadDisabled" class="hc-upload-loading upload-file-info" element-loading-text="上传中...">
            <template v-if="uploadFileInfo?.name">
                <HcIcon class="upload-file-icon" name="file-text"/>
                <div class="upload-file-name">{{ uploadFileInfo?.name }}</div>
            </template>
            <template v-else>
                <HcIcon class="upload-icon" name="upload-cloud"/>
                <div class="el-upload__text">拖动文件到这里 或 <em>点击这里选择文件</em> 并上传</div>
            </template>
        </div>

        <template #tip>
            <div class="el-upload__tip">允许格式：{{ formatTip }}， 文件大小 小于 {{ size }}MB</div>
        </template>
    </el-upload>
</template>

<script setup>
import {ref, watch} from "vue";
import {getTokenHeader} from '~src/api/request/header';
import {isFileSize} from "js-fast-way"
import {genFileId} from "element-plus";

const props = defineProps({
    datas: {
        type: Object,
        default: () => ({})
    },
    action: {
        type: String,
        default: "mobilization/read-excel"
    },
    accept: {
        type: String,
        default: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
    },
    size: {
        type: Number,
        default: 20
    },
    formatTip: {
        type: String,
        default: "excel"
    },
    autoUpload: {
        type: Boolean,
        default: true
    },
})

//变量
const uploadRef = ref(null)
const uploadData = ref(props.datas)
const uploadFileInfo = ref({})
const uploadDisabled = ref(false)

const api = '/api/blade-business/device/';

//监听
watch(() => [
    props.datas,
], ([datas]) => {
    uploadData.value = datas
})

//事件
const emit = defineEmits(['progress', 'finished', 'change'])

//上传前
const beforeUpload = async (file) => {
    if (isFileSize(file?.size, props.size)) {
        return true;
    } else {
        window?.$message?.warning('文件大小, 不能过' + props.size + 'M!');
        return false;
    }
}

//超出限制时
const uploadExceed = (files) => {
    uploadRef.value?.clearFiles()
    const file = files[0]
    file.uid = genFileId()
    uploadRef.value?.handleStart(file)
}

//上传中
const uploadprogress = () => {
    uploadDisabled.value = true
    emit('progress', true)
}

//上传完成
const uploadSuccess = ({code, data}) => {
    uploadDisabled.value = false
    emit('progress', false)
    if (code === 200) {
        window?.$message?.success('上传成功');
        emit('finished', data)
        uploadRef.value?.clearFiles()
    } else {
        window?.$message?.error('上传失败');
    }
}

//上传失败
const uploadError = () => {
    uploadDisabled.value = false
    emit('progress', false)
    window?.$message?.error('上传失败');
}

//文件改变时
const uploadChange = (file) => {
    uploadFileInfo.value = file
    emit('change', file)
}

const submit = () => {
    uploadRef.value?.submit()
}

const clearFiles = () => {
    uploadRef.value?.clearFiles()
}

// 暴露出去
defineExpose({
    submit,
    clearFiles
})
</script>

<style lang="scss">
.hc-upload-border.approach {
    .el-upload-dragger {
        padding: 24px;
    }
    .hc-upload-loading.upload-file-info {
        .hc-icon-i {
            font-size: 40px;
        }
        .upload-icon {
            color: var(--el-text-color-placeholder);
        }
        .upload-file-icon {
            color: var(--el-color-primary-light-5);
        }
        .el-upload__text {
            margin-top: 10px;
        }
        .upload-file-name {
            margin-top: 10px;
            font-size: 14px;
            text-align: center;
            color: var(--el-color-primary);
        }
    }
    .el-upload__tip {
        font-size: 14px;
        margin-top: 16px;
        color: var(--el-text-color-placeholder);
    }
}
</style>