接口导入功能

1.接口api

export function import(param) {
  return fetch({
    url: XXX.import,
    method: 'POST',
    headers: {
      'Content-Type': 'multipart/form-data;'
    },
    data: param
  })
}

2.页面vue  和  js逻辑

<el-button
            :loading="disable"
            :disabled="disable"
            size="mini"
            style="
              float: right;
              margin-left: 10px;
              margin-top: -27.5px;
              background-color: #06948c;
              color: #ffffff;
            "
            @click="inputBtn"
          >
        导入
</el-button>
<input type="file" @change="getFile($event)" style="display: none" ref="inputFile" accept=".xls"/>
 

import {  import  } from "../api";

data(){
   return {
          file: null,
         disable: false, // 导出loading
   }
},
methods:{
     inputBtn() {
        this.$refs.inputFile.click();
     },
    getFile(e) {
        this.disable = true
        this.file = e.target.files[0];
        const myformData = new FormData();
        myformData.append("file", this.file);
        if (this.file != {}) {
          import(myformData).then((res) => {
            e.target.value = ''
            if (res.code != 200) {
              this.$alert(res.message, "导入错误", {
                confirmButtonText: "确定",
              });
            } else {
              this.$alert(res.message, "导入成功", {
                confirmButtonText: "确定",
                callback:()=>{
                     this.queryFn()    //导入成功，重新请求接口，重新渲染页面
                }
              });
            }
            this.disable = false
          });
        }
      },
}