vue3+ts实现导入excel功能

这里演示全过程 全程干货

<template>
    <div>
       <el-button
          type="primary"
          plain
          @click="handleInput"
          :loading="upload.isUploading"
        >
          <Icon icon="ep:download" class="mr-5px"/>
          导入
        </el-button>

<el-dialog title="导入模版文件" v-model="upload.open" width="400px" append-to-body>
    <el-upload ref="uploadRef"
               :limit="1"
               accept=".xlsx, .xls"
               :headers="upload.headers"
               :action="upload.url + '?updateSupport='+ upload.updateSupport"
               :disabled="upload.isUploading"
               :on-exceed="handleExceed"
               :on-success="submitFormSuccess"
               :auto-upload="false" drag>
      <i class="el-icon-upload"></i>
      <div class="el-upload__text"><em>点击上传</em></div>
      <template #tip>
        <div class="el-upload__tip">
          <el-checkbox v-model="upload.updateSupport"/>
          是否更新已经存在的用户数据
        </div>
        <span>仅允许导入xls、xlsx格式文件。</span>
      </template>
    </el-upload>
    <el-link type="primary" :underline="false" style="" @click="importTemplate">下载模板</el-link>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </template>
  </el-dialog>
    </div>
</template>

<script setup lang="ts">
   const upload = reactive({
      headers: {
        Authorization: 'Bearer ' + getAccessToken()
      },        //url:后端接口地址
      url: import.meta.env.VITE_BASE_URL + import.meta.env.VITE_API_URL+'/agent/upload',
      open: false,
      updateSupport: false,
      isUploading: false
    })

    //导入按钮
    const handleInput = () => {
      upload.open = true;
    }    
    const importTemplate = async () => {
      const data = await Api.importTemplate();
      download.excel(data, '经销商列.xls')
    }
    /** 文件数超出提示 */
    const handleExceed = (): void => {
      message.error('最多只能上传一个文件！')
    }
    const uploadRef = ref(null)
    const submitFileForm = async () => {
      try {
        if (uploadRef.value) {
          upload.isUploading = true
          uploadRef.value!.submit();
        }
      }catch(error){
        console.log(error)
      }
    }
    //成功后的逻辑
    const submitFormSuccess = async (response: any) => {
      message.alert(data)
      upload.open=false
      upload.isUploading=false
      // 发送操作成功的事件
      emits('success') //这里是一个组件 根据你实际的来
    }
</script>

@Override
    public String importExcel(List<AgentRespVO> list, Boolean updateSupport, Long userId) {
        if (list == null || list.isEmpty()) {
            throw new RuntimeException("导入数据不能为空！");
        }
        int successNum = 0;
        int failureNum = 0;
        StringBuilder successMsg = new StringBuilder();
        StringBuilder failureMsg = new StringBuilder();
        for (AgentRespVO pVO : list) {
            // 验证是否存在
            AgentDO p = selectByAgentName(pVO.getName());
            if (p == null) {
                AgentLevelDO agentLevelDO =
                        agentLevelMapper.selectByName(pVO.getLevelName());
                if (agentLevelDO == null) {
                    failureNum++;
                    failureMsg.append("<br/>" + failureNum + "、等级 " + pVO.getLevelName() + " 不存在");
                } else {
                    pVO.setLevelId(agentLevelDO.getId());
                    Long parentId = selectByParentName(pVO.getParentName());
                    pVO.setParentId(parentId);
                    p = BeanUtils.toBean(pVO, AgentDO.class);
                    System.out.println(p);
                    p.setAddress(pVO.getAddress());
                    System.out.println(p.getAddress());
                    Mapper.insert(p);
                    successNum++;
                    successMsg.append("<br/>" + successNum + "、经销商" + pVO.getName() + " 导入成功");
                }
            } else if (p.getDeleted()) {
                //p不为空但已经逻辑删除
                p = BeanUtils.toBean(pVO, AgentDO.class);
                Mapper.insert(p);
                successNum++;
                successMsg.append("<br/>" + successNum + "、产品 " + pVO.getName() + " 导入成功");
            } else if (updateSupport) {
                p.setUpdater(userId.toString());
                Mapper.updateById(p);
                successNum++;
                successMsg.append("<br/>" + successNum + "、经销商" + pVO.getName() + " 更新成功");
            } else {
                failureNum++;
                failureMsg.append("<br/>" + failureNum + "、经销商" + pVO.getName() + " 已存在");
            }
        }
        if (failureNum > 0) {
            failureMsg.insert(0, "很抱歉，导入失败！<br/>共 " + failureNum + " 条数据格式不正确，错误如下：");
            if (!successMsg.toString().isEmpty()) {
                failureMsg.append("<br/>" + "导入成功" + successNum + "条数据");
                failureMsg.append(successMsg);
            }
            return failureMsg.toString();
        } else {
            successMsg.insert(0, "恭喜您，数据已全部导入成功！共 " + successNum + " 条，数据如下：");
        }
        return successMsg.toString();

    }