当前位置: 首页 > article >正文

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,可以保证批量保存到数据库的顺序,避免报错


http://www.kler.cn/a/403559.html

相关文章:

  • Centos 8, add repo
  • 机器学习day6-线性代数2-梯度下降
  • 【Qt】QComboBox设置默认显示为空
  • 将网站地址改成https地址需要哪些材料
  • 电解车间铜业机器人剥片技术是现代铜冶炼过程中自动化和智能化的重要体现
  • IntelliJ+SpringBoot项目实战(十二)--设计项目多模块依赖关系和跨模块调用服务和接口
  • 002创建ASP.NET Core项目-数据库优先
  • C++算法练习-day41——700二叉搜索树中的搜索
  • RFdiffusion EuclideanDiffuser类解读
  • 缓存cache
  • Apache和HTTPS证书的生成与安装
  • 用遗传算法优化的网络学习改进算法
  • 斯坦福UC伯克利开源突破性视觉场景生成与编辑技术,精准描绘3D/4D世界!
  • MySQL:联合查询(2)
  • PH热榜 | 2024-11-19
  • 组件注册:局部(app.vue,import,components,组件标签)全局(main.js,import,vue.component,-组件标签)
  • CRM系统安全性排名:数据保护能力评估
  • 深入探索Golang的GMP调度机制:源码解析与实现原理
  • 【Linux】Namespace
  • Linux的权限
  • HarmonyOS Next 关于页面渲染的性能优化方案
  • C语言菜鸟入门·关键字·void的用法
  • 初学 flutter 问题记录
  • 在C#语言里对NULL的简化赋值
  • 虚拟化表格(Virtualized Table)性能优化
  • Leetcode 快乐数