element-ui上传Excel文件

前言

最近在学校接了个小项目，在设计过程中遇到了一个问题，需求中需要可以使用Excel导入数据，这里我就要考虑前端上传Excel文件，最开始想的是在前端把Excel文件处理好了之后将数据传递到后端，但是因为各种原因选择将文件直接送到后端去处理。
我选择了使用element-ui的upload组件进行上传。开始我以为，照着文档 copy过去后修改后台地址和数据格式等限制即可。事实证明，我还是太单纯。过程中出现了，跨域等问题，想设置请求头对文档理解又有些偏差，所以我选择了手动上传

代码

<el-form>
      <el-form-item label="导入学生名单，只支持xls格式文件" prop="file">
        <el-upload
          class="upload-demo"
          ref="upload"
          multiple
          accept=".xlsx"
          action=""
          :http-request="httpRequest"
          :file-list="fileList"
          :auto-upload="false"
        >
          <el-button slot="trigger" size="small" type="primary"
            >选取文件</el-button
          >
          <el-button style="margin-left:5px" size="small" type="primary" @click="submitUploadList">上传</el-button>
        </el-upload>
      </el-form-item>
    </el-form>

**auto-upload=“false”**会将上传方式设置为手动上传。当我们设置手动上传之后，upload组件的 this.$refs.upload.submit(); 方法会调用 http-request 方法，该方法是我们手动上传的自定义方法。注意：当我们选择手动上传之后，监听上传的钩子会全部无效。我们只能在自定义的上传方法中通过请求回调的参数进行接下来的一些列判断和操作。

 data() {
    return {
      fileList: [],
      loadUrl:'https://lishuo.picp.vip/tomcat/uploadServlet'
    };
  },
  methods: {
    httpRequest(param) {
      console.log(param);
      let fileObj = param.file; // 相当于input里取得的files
      let fd = new FormData(); // FormData 对象
      fd.append("file", fileObj); // 文件对象

      let url = this.loadUrl
      let config = {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      };
      axios.post(url, fd, config).then((res) => {
        console.log(res);
        // 上传完成后，后台会将反馈结果反馈到这里，我们可以在这里进行接下来的一系列操作
      });
    },
    submitUploadList() {
      this.$refs.upload.submit();
    },
  },

还要注意的是，我们需要把el-upload下的input的通过css样式隐藏起来。否则页面依然会显示默认的input上传框，贼难看的那种。

.upload-demo input{
  display: none;
}

最后成品

文章最后感谢csdn博主 提莫拌一团蘑菇,通过阅读该大佬的文章，解决了困扰几天的大问题。
也给诸多前端小白一个建议：多写代码多看文档，但是不要过于依赖文档。