使用el-upload实现手动导入

<el-space v-auth="'operation:activity:import'">
          <el-button type="primary" size="default" @click="handleImport" >
                <template #icon>
                    <el-icon>
                      <svg-icon name="i-ep:upload" />
                    </el-icon>
                  </template>
                  导入
          </el-button>
      <!-- 导入组件 -->
      <importVue ref="importVueref" @success="getList"></importVue>
</el-space>


import importVue from './import.vue' //导入组件

导入组件代码

<template>
    <div>
        <Dialog v-model="dialogFormVisible" title="用户导入" width="400">
            <el-upload ref="uploadRef" v-model:file-list="fileList" :action="importUrl" :auto-upload="false"
                :disabled="formLoading" :headers="uploadHeaders" :limit="1" :on-error="submitFormError"
                :on-exceed="handleExceed" :on-success="submitFormSuccess" accept=".xlsx, .xls" drag>
                <Icon icon="ep:upload" />
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <template #tip>
                    <div class="el-upload__tip text-center">
                        <span>仅允许导入 xls、xlsx 格式文件。</span>
                        <el-link :underline="false" style="font-size: 12px; vertical-align: baseline" type="primary"
                            @click="importTemplate">
                            下载模板
                        </el-link>
                    </div>
                </template>
            </el-upload>
            <template #footer>
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
            </template>
        </Dialog>
    </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import useUserStore from '@/store/modules/user'
import * as behaviorDictionary from '@/api/operate/behaviorDictionary'
import download from '@/utils/download' //导出

const userStore = useUserStore()
const uploadRef = ref()
const dialogFormVisible = ref(false)   //导入弹框
const formLoading = ref(false) // 表单的加载中
const fileList = ref([]) // 文件列表
const uploadHeaders = ref() // 上传 Header 头
const base = (import.meta.env.DEV && import.meta.env.VITE_OPEN_PROXY === 'true') ? '/proxy/' : (window as any).g.BaseUrl
const importUrl = base + '/operation-api/operation/activity/import';
//弹框确定
const submitForm = async () => {
    dialogFormVisible.value = false
    if (fileList.value.length == 0) {
        return
    }
    // 提交请求传递数据
    uploadHeaders.value = {
        Authorization: 'Bearer ' + userStore.token,
        'tenant-id': userStore.tenantid,
        'as-tenant-id': userStore.asTenant?.id
    }
    //手动上传
    uploadRef.value!.submit()
}

/** 文件上传成功 */
const emits = defineEmits(['success'])

//文件上传成功时的钩子
const submitFormSuccess = (response: any) => {
    if (response.code !== 0) {
        ElMessage.error(response.msg)
        formLoading.value = false
        return
    }
    // 拼接提示语
    ElMessage.success('上传成功')
    dialogFormVisible.value = false

    const data = response.data
    let text = '上传成功数量：' + data.createUsernames.length + ';'
    for (let username of data.createUsernames) {
        text += '< ' + username + ' >'
    }
    text += '更新成功数量：' + data.updateUsernames.length + ';'
    for (const username of data.updateUsernames) {
        text += '< ' + username + ' >'
    }
    text += '更新失败数量：' + Object.keys(data.failureUsernames).length + ';'
    for (const username in data.failureUsernames) {
        text += '< ' + username + ': ' + data.failureUsernames[username] + ' >'
    }
    // 发送操作成功的事件
    emits('success')
}

//文件上传失败时的钩子
const submitFormError = (): void => {
    formLoading.value = false
}

/** 重置表单 */
const resetForm = () => {
    // 重置上传状态和文件
    formLoading.value = false
    uploadRef.value?.clearFiles()
    fileList.value = []
}

//当超出限制时，执行的钩子函数
const handleExceed = (): void => {

}

//点击下载模板操作 
const importTemplate = async () => {
    const res:any = await behaviorDictionary.getImportTemplate ()
    download.excel(res, '活动字典下载模版.xls')
}

// 打开弹窗 
const open = () => {
    dialogFormVisible.value = true //打开弹窗
    resetForm()
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

</script>

<style lang="scss" scoped></style>