vue使用Element的el-upload批量导入Excel功能

需求描述：

批量上传点击确定按钮再弹出一个dialog 弹框显示成功多少条，失败多少条，可下载查看的失败链接，如全部成功不显示下载查看的链接

  <el-button
          type="warning"
          class="import-button"
          icon="el-icon-upload2"
          size="mini"
          @click="uploadFiles"
        >
          <i class="icon"></i>
          批量导入
        </el-button>
   <!-- 批量导入弹框 -->
    <el-dialog
      class="dialog-box"
      title="批量导入"
      width="25%"
      :visible.sync="uploadShowDialog"
    >
        <!-- 
                class="up-class"  
                :multiple="false"           
                :action="#"     //手动上传的地址
                ref="upload"
                :before-upload="beforeUpload"  //上传文件之前的钩子，参数为上传的文件
                :file-list="fileList"         //上传的文件列表
                 :http-request="uploadHttpRequest"     // 覆盖默认的上传行为，可以自定义上传的实现
                :on-change="handleUploadChange" //文件状态改变时的钩子
                :limit="1"  //最大允许上传个数
 				-->
      <el-upload
        class="upload-demo"
        ref="upload"
        action="#"
        :multiple="false"
        :show-file-list="true"
        :before-upload="beforeUpload"
        :http-request="uploadHttpRequest"
        :file-list="fileList"
        :on-change="handleUploadChange"
        :limit="1"  
      >
        <div class="border">
          <i class="el-icon-plus"></i>
        </div>
        <div slot="tip" class="el-upload-tip">只能上传.xls、.xlsx文件</div>
      </el-upload>
      <span slot="footer">
        <el-button @click="submitUpload" type="primary"> 导入 </el-button>
        <el-button @click="uploadShowDialog = false" class="cancelDialog">
          取消
        </el-button>
      </span>
    </el-dialog>

<script>
import {
  updateList,
  batchDispatchOrder,
  batchuploadFile,
  downloadDevices
} from '@/api/employment/waitingList.js';
export default {
     data() {
     
        return {
           file: null,
          //加载动画
          uploadLoading: false,
          //上传的文件列表
          fileList: [],
          //控制弹出框显示与否
          uploadShowDialog: false,
          //上传地址
          uploadURL: '',
          //loading加载中
          downloadLoading: '',
        }

     }

    
}


</script>

  uploadFiles() {
      this.uploadLoading = false;
      this.fileList = [];
      this.uploadShowDialog = true;
      // setTimeout(() => {
      //   //清空已上传的文件列表
      //   this.$refs.upload.clearFiles();
      // }, 100);
    },
    // 限制文件上传的个数只有一个，获取上传列表的最后一个
    handleUploadChange(file, fileList) {
      if (fileList.length > 0) {
        // 这一步，是展示最后一次选择的文件
        this.fileList = [fileList[fileList.length - 1]];
      }
    },
    // 上传文件之前，先判断文件后缀和大小
    beforeUpload(file) {
      //截取文件后缀名
      const fileName = file.name.substring(file.name.lastIndexOf('.'));
      if (
        fileName.toLowerCase() != '.xls' &&
        fileName.toLowerCase() != '.xlsx'
      ) {
        this.$message.error('文件必须为.xls或xlsx类型');
        this.fileList = [];
        return false;
      }
      //读取文件大小
      var fileSize = file.size;
      console.log(fileSize);
      if (fileSize > 1048576) {
        this.uploadShowDialog = false;
        this.$message({
          type: 'error',
          showClose: true,
          duration: 3000,
          message: '文件不能大于1M!'
        });
        return false;
      }
    },
    // 覆盖element的默认上传文件
    uploadHttpRequest(file) {
      this.file = file;
    },
    //点击确定上传按钮
    submitUpload() {
      // loading加载中，通过this.downloadLoading.close()可关闭

      if (this.fileList.length === 0) {
        this.$message({
          type: 'error',
          showClose: true,
          duration: 3000,
          message: '请选择要上传的文件'
        });
        return false;
      }
      //调接口上传
      let formData = new FormData();
      //控制台打印file，找到要上传的file，图中.raw
      formData.append('file', this.file.file);
      if (!!this.file.file) {
        this.downloadLoading = this.$loading({
          lock: true,
          text: '数据导入中...',
          color: '#0183FF',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.3)'
        });
        //注：formData中的数据不能直接打印，需要用到get方法得到
        // batchuploadFile是接口
        batchuploadFile(formData).then(res => {
          this.uploadShowDialog = false;
           this.handleQuery();
        });
      } else {
        this.downloadLoading.close();
      }
    }

附上原图：