vue+node+Express+xlsx+emements-plus实现导入excel,并且将数据保存到数据库

devtools/2024/11/23 4:23:30/

excel_0">vue+node+Express+xlsx+emements-plus实现导入excel,并且将数据保存到数据库

前端：

pnpm i xlsx

import { utils, writeFileXLSX,read } from 'xlsx'

准备好DOM，采用的el-upload，使用http-request实现自定义上传，注意这里的action要为空

<el-uploadv-model:file-list="fileList"class="upload-demo":http-request="handleUpload" action=" ":limit="1"><el-button type="primary">上传</el-button></el-upload>

上传数据的接口

// 上传班级Excel
export function uploadClassExcelApi(data) {return request({url: '/info/importClass',method: 'post',data,headers: {'Content-Type': 'application/json'},})
}

注意：request是基于axios的二次封装

自定义处理文件的函数

/*** 处理文件上传功能* 该函数通过FileReader读取用户上传的文件，并将其转换为JSON格式的数据，以便进一步处理* @param {Event} e 文件上传事件，包含上传的文件信息*/
function handleUpload(e){// 获取上传的文件const file = e.file;// 创建一个FileReader实例const reader = new FileReader();// 当文件读取完成时触发该函数reader.onload = async(e) => {// 将读取的结果转换为Uint8Array格式const data = new Uint8Array(e.target.result);// 使用read函数读取Excel数据const workbook = read(data, { type: 'array' });// 获取第一个工作表的名称const sheetName = workbook.SheetNames[0];// 获取第一个工作表const worksheet = workbook.Sheets[sheetName];// 将工作表转换为JSON格式的数据const jsonData = utils.sheet_to_json(worksheet);// 这里可将jsonData发送到后端进行进一步处理// 调用后端API上传Excel数据，并包含当前日期const res=await uploadClassExcelApi({jsonData,create_time:dayFormat(new Date())})// 打印API返回的结果console.log(res);};// 以ArrayBuffer格式读取文件reader.readAsArrayBuffer(file);
}

node

const multer=require('multer')
const storage = multer.memoryStorage();
const uploadExcel = multer({ storage });
// 班级导入Excel
router.post('/importClass',uploadExcel.single('excelFile'),infoHandler.importClass)

// 封装一个返回 Promise 的函数来执行数据库查询
function querys(sql, params) {return new Promise((resolve, reject) => {db.query(sql, params, (err, results) => {if (err) {reject(err);} else {resolve(results);}});});
}

该函数会在下面的路由处理调用

exports.importClass = async (req, res) => {const data = req.body.jsonData;const sql = 'insert into class set ?';const sqls = 'select * from class where college=? and major=? and class=?';try {for (const item of data) {/***********以下可以根据需求进行更改***********/// 查重班级const results = await querys(sqls, [item.学院, item.专业, item.班级]);if (results.length !== 0) {return res.cc('班级已存在');}await querys(sql, {college: item.学院,major: item.专业,class: item.班级,delete: 0,create_time: req.body.create_time});}return res.cc('导入班级成功', 0);} catch (err) {return res.cc(err);}
}