vue的excel导入

我在这里首先是给自己写得一个弹框，结合的elementui，点击表格导入的label就触发input文件的事件

<!-- 
      action:上传的地址
      auto-upload:是否在选取文件后立即进行上传
      before-upload:上传文件之前的钩子
     -->

    <el-dialog title="导入文件" :center="true" :visible.sync="excelImportShow">
      <input
        style="display:none;"
        id="up"
        ref="file"
        type="file"
        @change="importFile"
      />
      <label for="up" style="width:100%;text-align:center;display: block;">
        <el-link type="success" plain>表格导入</el-link>
      </label>
    </el-dialog>

		// 文件上传，这是data里面保存的数据
      excelImportShow: false,
      formData: {},

export default {
  methods: {
		// 导入excel
	    importFile(e) {
	      let _this = this;
	      //FormDate对象
	      this.formData = new FormData();
	      //把文件信息放入对象中
	      this.formData.append("serviceFile", e.target.files[0]);
	      let file = e.target.files[0];
	      let name = e.target.files[0].name;
	      //调用后台接口函数
	      this.importUpload();
	    },
    }
}

调用接口的时候，直接把this.formData传过去就行了，我这里封装的axios

// 封装上传excel
    async importUpload() {
      let url = "/admin/school/import";//地址
      let params = this.formData;//直接传formData
      let { code, data, msg } = await Api.postApi(url, params);
      if (code === 0) {
        if (code === 0) {
          this.$message({
            message: msg,
            type: "success"
          });
          // 调用接口
          this.excelImportShow = false;//弹出框隐藏
        }
        if (code === 1) {
          this.$message.error(msg);
        }
      }
      // console.log(code, data, msg);
    }

由于后端给我的接口里面的这个地方是multipart/form-data，所以我在封装axios的时候进行了请求拦截，把他的这个改为了multipart/form-data

前面是请求方式post，后面是请求地址，拦截到头部，修改

具体情况看接口文档改变