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

需求描述：

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

  
          
          批量导入
        
   
    
        
      
        

          
        
        
只能上传.xls、.xlsx文件
      
      
         导入 
        
          取消
        
      
    

  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();
      }
    }

附上原图：