vue +element + 导入表格（ 导入的表格传给后台 form-data 格式 ）

此处介绍2中使用方法，第1种方法更简单
第一种：

<template>
  <div>
     <el-upload class="upload-demo" :action="importExcel" :on-success="uploadSuccess" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" :show-file-list="false">
         <el-button size="mini" type="primary">导入</el-button>
     </el-upload>
  </div>
 </template>
<script>
import { importExcel } from "@/apis/apis";
export default {
  data() {
    return {
    	importExcel, 
    }
  },
  methods:{
   //  上传表格成功
    uploadSuccess(res) {
      // console.log(res)
      if (res.code === 0) {
        this.$message.success('上传成功')
        // 导入数据之后，需要调用接口，刷新数据
      } else {
        this.$message.error(res.message)
      }
    },
  }
}
</script>

在 apis —> apis.js中

// 导入表格
export const importExcel = process.env.BASE_URL + "/net/account/importUser";

下方是我微信公众号的二维码，可以扫码关注以下，后期博文推送主要在公众号上面，有什么问题也可以通过公众号跟我发消息哦~

第二种：

<template>
  <div>
      <el-upload class="upload" action="#" :show-file-list="false" :on-change="handleExcel" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" :auto-upload="false">
      <img src="@/assets/images/import.png" alt />
      导入考生信息
    </el-upload>
  </div>
 </template>
 
<script>
import { importUserInfo} from "@/apis/apis";
export default {
  methods: {
    //导入表格
    handleExcel(file) {
      let formData = new FormData(); //声明一个FormDate对象
      formData.append("file", file.raw);    //把文件信息放入对象中
      
      //调用后台导入的接口
      importUserInfo(formData).then(res => {
        // console.log(res)
        if (res.code == 0) {
          this.getList();   // 导入表格之后可以获取导入的数据渲染到页面，此处的方法是获取导入的数据
        } else {
          this.$message.error(res.message)
        }
      }).catch(err => {
        that.$message({
          type: 'error',
          message: '导入失败'
        })
      })
    },
  }
}

注：
如果是导入的表格要传给后台 form-data 格式，则 要在请求头里把请求头 Content-Type 设置成 ‘multipart/form-data;charset=UTF-8’
在 apis.js里：

//apis.js
// 导入信息
export const importUserInfo= function(params) {
  let url = "/xxx/xxx/xxx/xxx";
  return https(url, params, "post", "form-data");
};

在axios.js
在post请求加上如下代码：

      if (method === 'post') {

        if (headerType === "json") {
            axios.defaults.headers["Content-Type"] = 'application/json;charset=UTF-8'
            data = params
        }   
        else if(headerType == "form-data"){
            axios.defaults.headers["Content-Type"] = 'multipart/form-data;charset=UTF-8'
            data = params;
        }
        else {
            axios.defaults.headers["Content-Type"] = 'application/x-www-form-urlencoded;charset=UTF-8'
            data = Qs.stringify(params);
        }
    }