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

<template>
    <el-upload ref="uploadRef" class="hc-upload-border approach" drag :action="action" :headers="getTokenHeader()" :data="uploadData" :accept="accept" :disabled="uploadDisabled" :limit="1" :show-file-list="false"
               :before-upload="beforeUpload" :on-exceed="uploadExceed" :on-progress="uploadprogress" :on-success="uploadSuccess" :on-error="uploadError" :on-change="uploadChange" :auto-upload="false">

        <div class="hc-upload-loading upload-file-info" v-loading="uploadDisabled" element-loading-text="上传中...">
            <template v-if="uploadFileInfo?.name">
                <HcIcon name="file-text" class="upload-file-icon"/>
                <div class="upload-file-name">{{uploadFileInfo?.name}}</div>
            </template>
            <template v-else>
                <HcIcon name="upload-cloud" class="upload-icon"/>
                <div class="el-upload__text">拖动文件到这里 或 <em>点击这里选择文件</em> 并上传</div>
            </template>
        </div>

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

<script setup>
import {ref,watch,onMounted} from "vue";
import {getTokenHeader} from '~src/api/request/header';
import {getObjValue, isSize} from "vue-utils-plus"
import {genFileId} from "element-plus";
const props = defineProps({
    datas: {
        type: Object,
        default: () => ({})
    },
})

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

const action = '/api/blade-manager/exceltab/add-buss-file';
const accept = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel';

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


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

//上传前
const beforeUpload = async (file) => {
    if (isSize(file?.size,60)) {
        return true;
    } else {
        window?.$message?.warning('文件大小, 不能过60M!');
        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 = (res) => {
    uploadDisabled.value = false
    emit('progress', false)
    emit('finished', {
        type: 'success',
        data: getObjValue(res?.data)
    })
}

//上传失败
const uploadError = (res) => {
    uploadDisabled.value = false
    emit('progress', false)
    emit('finished', {
        type: 'error',
        data: getObjValue(res?.data)
    })
    window?.$message?.error('导入失败');
}

//文件改变时
const uploadChange = (file) => {
    console.log(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>