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

前端：

js 复制代码

pnpm i xlsx

js 复制代码

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

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

html 复制代码

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

上传数据的接口

js 复制代码

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

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

自定义处理文件的函数

js 复制代码

/**
 * 处理文件上传功能
 * 该函数通过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

js 复制代码

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

js 复制代码

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

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

js 复制代码

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