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

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:数字20 设计师:CSDN官方博客 返回首页
评论 10

打赏作者

小河豚oO

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值