vue使用elemtui + xlsx实现excel导入，上传到koa后端

引入el-upload组件，使用el-upload

<template><div id="excel"><el-upload class="upload-demo"action="https://jsonplaceholder.typicode.com/posts/":on-change="handleChange":auto-upload="false":show-file-list="false"multiple:limit="3"ref="uploadRef"accept=".xls, .xlsx"><el-button size="middle"type="primary">点击上传</el-button></el-upload></div>
</template>// script中的data
data () {return {// 用来保存上传的excel数据excel: []}}

引入第三方库xlsx

// npm install xlsx --save
// npm install -S file-saver
// npm install -D script-loader

封装读取excel的方法

import XLSX from 'xlsx'readExcel (file) {// 将它做成一个promise对象return new Promise((resolve, reject) => {// 使用文件对象打开文件，获取其中内容const reader = new FileReader()// 固定用法，用来获取文件中的内容reader.onload = e => {// 获取文件中的内容const data = e.target.result// 固定用法，以二进制方式读取this.wb = XLSX.read(data, {type: 'binary'})// console.log(this.wb)// 用来存抽取出来的excel数据const result = []this.wb.SheetNames.forEach(SheetName => {result.push({// 这个相当于excel里面的sheet的名字sheetName: SheetName,// 将excel转换为json格式sheet: XLSX.utils.sheet_to_json(this.wb.Sheets[SheetName])})})resolve(result)}// 以二进制方式打开文件，readAsBinaryString值能读取blob和file对象，而file.ra就是file对线，如果是原生js这就是file[0]reader.readAsBinaryString(file.raw)})}

在handleChange方法中调用读取方法

handleChange (file) {// console.log(file)// 对上传文件的name以.进行分割成两部分，取第二部分进行文件类型验证const types = file.name.split('.')[1]const fileType = ['xlsx', 'xlc', 'xlm', 'xls', 'xlt', 'xlw', 'csv'].some(item => item === types)// 判断文件类型是否正确if (!fileType) {this.$message('格式错误！请重新选择')return}// 调用封装好的readExcel方法this.readExcel(file).then(tabJson => {if (tabJson && tabJson.length > 0) {// const xlsxJson = tabJson// console.log('数据:', tabJson)// 抽离数据tabJson.forEach(valid => {valid.sheet.forEach(v => {// 将数据保存到excel数组this.excel.push(v)})})// console.log(this.excel)// 将事件发送出去this.$emit('excelList', this.excel)}})// console.log(this.$refs.uploadRef)this.$refs.uploadRef.clearFiles()}

在另外一个组件中使用上面的excel组件

// 比如在student.vue中使用
<excel @excelList="importExcel"ref="excelRef"></excel>// script中的data
data (){// excel数据excelList: []
}// methods中的方法
async importExcel (e) {// console.log(e)// 这里的e是excel组件发送过来的数据，也就是抽离后的excel数据e.forEach(valid => {// console.log(valid)// excel中对应的数据字段const obj = {studentNumber: valid.学号,name: valid.姓名,sex: valid.性别,college: valid.学院,class: valid.班级,tower: valid.宿舍,dorm: valid.宿舍号,tel: valid.电话}// 保存数据到excelListthis.excelList.push(obj)})// console.log(this.excelList)// 发送网络请求const { data: res } = await this.$axios.get('/student/addExcelData', {params: {// 将保存在excelList的excel数据转换成json字符串，因为这是要将一个数组上传到koaexcelList: JSON.stringify(this.excelList)}})// console.log(res)if (res.code !== 0) {this.$message.warning('添加失败，请确认学号有没有重复或之前是否已经添加过该学生')this.$refs.excelRef.removeFile()this.excelList = []return false} else {this.$message.success('添加成功,新增内容在最后一页呦！')// 移除上传的文件，为了防止后续上传数据的时候造成二次上传this.$refs.excelRef.removeFile()// 重新获取最新的数据，包括上传的exce展示到前端页面this.getStudentList()// 清空excelList里面保存有的excel数据，防止二次上传不同excel的数据时造成数据重复this.excelList = []}}

koa后端数据处理，进行数据保存到mongoose

// 导入excel的接口
router.get('/addExcelData', async (ctx, next) => {// console.log('数组为：', ctx.query.excelList, '-------')// 将json字符串解析回json对象var obj = eval('(' + ctx.query.excelList + ')')console.log(obj.length)let codetry {await StudentModel.insertMany(obj)code = 0} catch (error) {console.log(error)code = -1}ctx.body = {meg: code === 0 ? '添加成功' : '添加失败',code: code}
})

vue使用elemtui + xlsx实现excel导入，上传到koa后端相关推荐

ajax提交file空指针,excel导入上传文件报空指针错误
页面入口全选导入导出 ${msg['globals.button.delete.more']} 导出js function excelImport() { top.layer.open({ ty ...
Vue导入上传Excel
对Excel的数据进行上传首先需要使用xlsx 此文章的上传方式为手动上传(数据解析可在前端进行,也可交由后端处理) 安装插件 npm install xlsx 引入 import XLSX from ...
Excel数据上传并且导入数据库
Excel数据上传并导入数据库 Excel表中的数据示例样板相关依赖(本博客编写环境springboot) <dependency> ...
vue 使用js XLSX读取 excel 转换日期格式
前言大家好! 今天遇到了vue 使用js XLSX读取 excel 转换日期格式的问题,做个记录问题今天写excel文件上传时,遇到了时间格式没有正确转换的问题解决方式借用了项目中读取 e ...
Springboot+thymeleaf实现excel文件上传+后台数据搜索
废话不多说,直接上代码先说excel文件上传用的是poi框架先贴maven配置 <dependency><groupId&g ...
利用XLSX工具库实现xlsx或xls的上传
在实际的业务需求有很多是需要进行导入导出功能的.XLSX是一个十分方便且功能完善的工具库.今天便利用其先介绍一下导入功能. 一.XLSX工具库 XLSX是一个简单快捷易上手的xlsx.xls文件上传的 ...
EXCEL与Mysql数据相互同步---EXCEL数据上传到Mysql,从Mysql下载数据到EXCEL__1
EXCEL数据上传到Mysql,从Mysql下载数据到EXCEL 总结一下最近项目中用到的excel和mysql数据同步流程(Springboot里面使用的jdbcTemplate,如果要集成myba ...
springboot实现excel的上传并解析文件内容
因为老大说表单填写评分太麻烦了,所以就要求我们改成excel表格上传进行评价:所以我一直没写过就只能自己摸索摸索了: 到了今天调试基本没有问题了.下文将是完整的代码,没有涉及到数据库.我现在的目的是先 ...
SSM项目的excel文件上传并添加到数据库
SSM项目的excel文件上传并添加到数据库(新手,不足之处请多多指教) 基于学校的课设,要用到excel文件的上传和数据库导入,在网上找了好多demo,最后找到一篇使用poi的,经过修改后,可以正常 ...

vue使用elemtui + xlsx实现excel导入，上传到koa后端

vue使用elemtui + xlsx实现excel导入，上传到koa后端相关推荐

最新文章

热门文章