Vue + springboot 表单导入Excel中数据到数据库

目录

主要思路

准备

前端代码

 关键代码：

后端代码

运行结果

---

主要思路

        前端vue接收Excel文件中的数据，通过js对接收的数据进行规划，把接收的数据规整到一个对象数组中，然后我们把这个数组通过接口传给后端，然后通过后端的springboot框架对接收的数据和数据库进行交互，进而实现对数据的增删改查等操作。

准备

要在前端vue文件中下载XLSX依赖

npm install xlsx

 然后在vue的 main.js 文件中加入你下载的依赖：

import XLSX from 'xlsx'


Vue.use(XLSX)

前端代码

我是利用了 element-ui 中的组件来实现对Excel文件的读取的。

 关键代码：

调用组件

<el-upload
          action=""
          :on-change="onChange"
          :auto-upload="false"
          :show-file-list="false"
          accept=".xls, .xlsx" >
          <el-button type="primary" icon="el-icon-folder-add">导入</el-button>
</el-upload>

在method方法中

async onChange (file) {
      let dataBinary = await readFile(file.raw)
      let workBook = XLSX.read(dataBinary, {type: 'binary', cellDates: true})
      let workSheet = workBook.Sheets[workBook.SheetNames[0]]
      const data = XLSX.utils.sheet_to_json(workSheet)
      console.log(data)
      this.teacher1 = data
      third.xlsx_two(this.teacher1)
        .then(response => {
          //提示
          this.$message({
            type: 'success',
            message: '上传成功!'
          })
        })
    },

在使用上述代码时，定义一个工具类：

/* 读取文件 */
export const readFile = (file) => {
  return new Promise(resolve => {
    let reader = new FileReader()
    reader.readAsBinaryString(file)
    reader.onload = ev => {
      resolve(ev.target.result)
    }
  })
}

后端代码

controller类

@RequestMapping("/xlsx_two")
    public String xlsx_two(@RequestBody(required = false)List<Teacher> list) throws ParseException {
        int sum = list.size();
        for(int i=0; i<sum; i++){
            teacherService.save(list.get(i));
        }
        return "Success";
    }

其中Teacher是我自己定义的一个对象类，到时候就使用你自己定义的对象类就可以了。

运行结果

点击按钮之后，会弹出弹窗让你选择你要导入的Excel文件。

 

我在Excel文件中添加了几行测试数据：

 运行完之后，在数据库中可以看到：

         这样我们就可以看到，我们导入的数据已经成功添加的数据库中啦！！(＾－＾)V