ant design vue做导入导出excel

导入：

写个导入按钮点击触发@click="方法名"

<a-button

        type="primary"

        @click="importUserExcel"

      >导入</a-button>

在method里面写：

// 导入excel

    importUserExcel () {

      this.$refs.uploadUserExcel.click(); // 浏览文件

      return

    },

readUserExcel (event) {

      if (event.target.files.length != 0) {

        let fileList = event.target.files;

        this.excelPersonName = fileList[0].name;

        this.excelUserFile = this.$refs.uploadUserExcel.files[0];

        this.gmDrUserSure();

      }

    },

//发送请求

    gmDrUserSure () {

      this.$loading.show();

      let formData = new FormData();

      formData.append("file", this.excelUserFile);

      if (this.excelName === "") {

        this.$message({

          type: "warning",

          message: "请选择excel文件！",

          duration: 2 * 1000,

        });

        return;

      }

      //上传excel(注意：importExcel是我后端的接口名，把你自己的后端导入的接口名替换importExcel)

      importExcel(formData).then(res => {

        this.$loading.hide();

        console.log('是否导入成功：', res);

        if (res.code == 200) {

          this.$message.success('导入成功！')

          this.selectStaffByCondition()

        } else {

          this.$message.warning('导入失败！！')

        }

      }, (err) => {

        this.$loading.hide();

        this.$message.error('连接超时，请检查您的网络稍后重试!');

      })

    },

调用后端接口：（在你写接口的js里写）

//导入Excel,返回异常行数

export function importExcel (params) {

  console.log('post:', params)

  return request({

    url: '/v1/employee/readexecl',//改成你自己后端接口的地址

    method: 'POST',

    headers: {

      'Content-Type': ' multipart/form-data'

    },

    data: params,//data是一定要写的否则导入失败

  })

}

（自己写代码的时候百度找到的，不是自己写出来的）

除了接口名与接口地址改掉，其他的直接复制即可！！！