后台导入Excel表格（Vue项目）

导入Excel表格，本来是想着封装请求方法的，行不通，所以直接调用，用的插件是element的upload插件，因为upload默认的传参是file，需要前后端协调。

<el-upload
            class="upload-demo"
            :before-remove="beforeRemove"
            :before-upload="beforeUploadFile"
            multiple
            :limit="3"
            :on-exceed="handleExceed"
            :file-list="fileList"
            :on-success="handleSuccess"
            :action="uploadProps.action"
            :headers="uploadProps.headers"
            accept=".xlsx" 
            :data="uploadProps.data"
          >
            <el-button type="primary">导入</el-button>
          </el-upload>

这是html代码，在计算属性里调用接口，传参，在success事件里写接口成功后的代码。

computed: {
    uploadProps() {
      return {
        action: `这个是调用的接口`,
        headers: {
          `接口可能要带token`
        },
        data: {}
      };
    }
  },

之后就在方法里写申明的方法

beforeUploadFile(file) {
      let extension = file.name.substring(file.name.lastIndexOf(".") + 1);
      let size = file.size / 1024 / 1024;
      if (extension !== "xlsx") {
        this.$message.warning("只能上传Excel2017（即后缀是.xlsx）的文件");
        return false;
      }
      if (size > 10) {
        this.$message.warning("文件大小不得超过10M");
      }
    },

    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleSuccess(res) {
      if (res.code == 200) {
        this.$message.success(res.msg);
      } else {
        this.$message.error(res.msg);
      }
    },

导入Excel文件的全部代码