如何在Vue3+TS+Element Plus项目中实现Excel文件上传与数据导入？

Question

vue3+ts+element plus开发的web项目，后端使用的是.net 6开发的web api接口服务端，想实现前端excel上传导入数据，服务端后台 同步处理，最后存到数据库对应的库表中，请问大概该如何实现呢？

vue3+ts+element plus开发的web项目，后端使用的是.net 6开发的web api接口服务端，想实现前端excel上传导入数据，服务端后台 同步处理，最后存到数据库对应的库表中，请问大概该如何实现呢？

Answer 1

后端要提供两个接口，上传和导入，前端需要把文件的数据处理好，直接传入接口里就可以。

解析excel数据，可以使用xlsx

import * as XLSX from 'xlsx';
const processExcel = (file) => {
  const reader = new FileReader();
  reader.onload = (e) => {
    const data = new Uint8Array(e.target.result);
    const workbook = XLSX.read(data, { type: 'array' });

    // 处理 workbook 中的数据
    const sheetName = workbook.SheetNames[0];
    const worksheet = workbook.Sheets[sheetName];
    const jsonData = XLSX.utils.sheet_to_json(worksheet);

    console.log(jsonData);
  };
  reader.readAsArrayBuffer(file);
};

Answer 2

1. 后端直接提供导入和导出的接口，全程在后端处理。前端只是请求一下接口，数据处理全部交给后端。
2. 前端使用 exceljs 这样的excel文件处理库，纯前端处理excel文件的数据，最后把组装好的数据通过接口请求给后端。