vue3项目结合ant design vue的upLoad组件实现上传和下载Excel文件

1.上传文件

    1.组件引入

  import {  Button,  Upload } from 'ant-design-vue'

    2. 代码

 1 <Upload
 2   v-model:file-list="fileList"
 3   name="file"
 4   // 限制文件格式
 5   accept=".xlsx,.xls"
 6   // 自定义上传行为
 7   :customRequest="fileUpload"
 8 >    
 9 <Button style="margin: 0 16px 0 16px">
10   <UploadOutlined style='color:#0058FB '/>
11    上传数据
12 </Button>

 方法

 // 上传数据
       const fileUpload = (options, fileList) => {
          let file = options.file;
          let progress = { percent: 1 };
          let speed = 100 / (file.size / 65000);
          const intervalId = setInterval(() => {
            if (progress.percent < 100) {
               progress.percent += speed;
               options.onProgress(progress);
            } else {
               clearInterval(intervalId);
            }
         }, 100);
          const formData = new FormData()
          // formData.append('fileExcel', file) 里面的‘fileExcel’字段是接口参数
          formData.append('fileExcel', file)
          ruleCheckStore.getImportExcel(formData)
        };

  注意：在reques定义接口的地方添加headers

 2，下载Excel文件模板

    1，代码

 <Button @click="Download">
   <DownloadOutlined style='color:#0058FB '/>
   下载导入数据模板
 </Button>

方法

const Download = () => {
  let a = document.createElement("a");
  a.href = "后端接口";
  a.download = "文件名";
  a.style.display = "none"; 
  document.body.appendChild(a);
  a.click();
  a.remove();
}