- 引入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>
data () {
return {
excel: []
}
}
- 引入第三方库xlsx
- 封装读取excel的方法
import XLSX from 'xlsx'
readExcel (file) {
return new Promise((resolve, reject) => {
const reader = new FileReader()
reader.onload = e => {
const data = e.target.result
this.wb = XLSX.read(data, {
type: 'binary'
})
const result = []
this.wb.SheetNames.forEach(SheetName => {
result.push({
sheetName: SheetName,
sheet: XLSX.utils.sheet_to_json(this.wb.Sheets[SheetName])
})
})
resolve(result)
}
reader.readAsBinaryString(file.raw)
})
}
- 在handleChange方法中调用读取方法
handleChange (file) {
const types = file.name.split('.')[1]
const fileType = ['xlsx', 'xlc', 'xlm', 'xls', 'xlt', 'xlw', 'csv'].some(item => item === types)
if (!fileType) {
this.$message('格式错误!请重新选择')
return
}
this.readExcel(file).then(tabJson => {
if (tabJson && tabJson.length > 0) {
tabJson.forEach(valid => {
valid.sheet.forEach(v => {
this.excel.push(v)
})
})
this.$emit('excelList', this.excel)
}
})
this.$refs.uploadRef.clearFiles()
}
- 在另外一个组件中使用上面的excel组件
<excel @excelList="importExcel"
ref="excelRef"></excel>
data (){
excelList: []
}
async importExcel (e) {
e.forEach(valid => {
const obj = {
studentNumber: valid.学号,
name: valid.姓名,
sex: valid.性别,
college: valid.学院,
class: valid.班级,
tower: valid.宿舍,
dorm: valid.宿舍号,
tel: valid.电话
}
this.excelList.push(obj)
})
const { data: res } = await this.$axios.get('/student/addExcelData', {
params: {
excelList: JSON.stringify(this.excelList)
}
})
if (res.code !== 0) {
this.$message.warning('添加失败,请确认学号有没有重复或之前是否已经添加过该学生')
this.$refs.excelRef.removeFile()
this.excelList = []
return false
} else {
this.$message.success('添加成功,新增内容在最后一页呦!')
this.$refs.excelRef.removeFile()
this.getStudentList()
this.excelList = []
}
}
- koa后端数据处理,进行数据保存到mongoose
router.get('/addExcelData', async (ctx, next) => {
var obj = eval('(' + ctx.query.excelList + ')')
console.log(obj.length)
let code
try {
await StudentModel.insertMany(obj)
code = 0
} catch (error) {
console.log(error)
code = -1
}
ctx.body = {
meg: code === 0 ? '添加成功' : '添加失败',
code: code
}
})