持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第30天，点击查看活动详情

1.需求场景

刚才我们完成的信息添加是一个一个进行的，

实际情况中有时候需要我们一次性添加多个员工信息，

这个时候就需要我们开发一个批量导入的功能：将事先以excel格式保存的文件批量导入进来。

2.操作步骤

后端提供一个excel模板文件
用户填写这个excel模板文件
上传这个文件，实现批量导入功能

3.两种方案

3.1前端主导

上传excel文件，把excel文件的内容读出来，还原成最基本的行列结构，按后端的接口要求回传过去。

后端提供一个excel模板文件
用户填写这个excel模板文件
上传这个文件，实现批量导入功能
将本地的excel文件读出来
按接口文档的要求,把数据进行组装
调用接口

3.2后端主导

前端上传excel文件
后端收到文件后,读取数据,存到数据库中

4.具体实现

使用饿了么ui自带的excel导入模块

从vue-element-admin中提供的excel导入功能迁移到当前的项目中 gitee.com/panjiachen/…

引入UploadExcel组件并注册为全局(用的不多用为局部组件)

将vue-element-admin提供的组件复制到我们自己的项目 src/components/UploadExcel下
在index.js将它注册成全局组件

// 全局注册组件
import UploadExcel from '@/components/UploadExcel'
export default {
  install(Vue) {
    Vue.component('UploadExcel', UploadExcel)
  }
}

但是会报错无法识别xlsx文件,要求我们安装xlsx组件

安装 excel组件

npm install xlsx@0.14.1 -S

把组件放到一个页面上

<template>
  <div class="dashboard-container">
    <div class="dashboard-text">name: {{ name }}</div>
    <UploadExcel />
  </div>
</template>

显示到页面如下

但是只有样子无法使用

注册事件读取上传的excel文件

给UploadExcel组件注册on-success事件

<template>
  <div class="dashboard-container">
    <div class="dashboard-text">name: {{ name }}</div>
    <UploadExcel :on-success="hsuccess" />
  </div>
</template>

在data中注册表格数据

  data() {
    return {
      tableData: null,
      tableHeader: null
    }
  },

在methods中注册方法,绑定数据到data

  methods: {
    hsuccess({ results, header }) {
      this.tableData = results
      this.tableHeader = header
    }
  }

绑定后的数据:

excel数据:

按接口文档要求组装数据

juejin.cn/post/715582…

excel导入功能的实现