vue+node+Express+xlsx+emements-plus实现导入excel,并且将数据保存到数据库
vue+node+Express+xlsx+emements-plus实现导入excel,并且将数据保存到数据库
前端:
pnpm i xlsx
import { utils, writeFileXLSX,read } from 'xlsx'
准备好DOM,采用的el-upload,使用http-request实现自定义上传,注意这里的action要为空
<el-upload
v-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);
}
}
主要的流程是:前端读取Excel文件的数据,将数据转换成json格式,然后将数据交给后端处理,然后封装个方法返回promise,可以保证批量保存到数据库的顺序,避免报错