typescript - 如何在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文件的数据，最后把组装好的数据通过接口请求给后端。

Answer 3

在Vue3+TS+Element Plus项目中实现Excel文件上传与数据导入，你需要考虑前端和后端两个部分。前端部分负责文件上传和解析Excel文件，后端部分负责接收文件、处理数据和存储到数据库。

以下是一个简化的实现流程：

前端部分 (Vue3 + TypeScript + Element Plus)

1. 文件上传组件: 使用Element Plus提供的el-upload组件实现文件上传功能。

<template>  <el-upload    action="/api/upload"    :on-success="handleSuccess"    :before-upload="beforeUpload"    :file-list="fileList"    :auto-upload="false"  >    <el-button slot="trigger" size="small" type="primary">选择Excel文件</el-button>    <el-button type="success" @click="uploadFile">上传到服务器</el-button>  </el-upload></template><script lang="ts">import { ref } from 'vue';export default {  setup() {    const fileList = ref([]);    const beforeUpload = (file: File) => {      const isExcel = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || file.type === 'application/vnd.ms-excel';      if (!isExcel) {        alert('请选择Excel文件！');        return false;      }      const isLt2M = file.size / 1024 / 1024 < 2;      if (!isLt2M) {        alert('文件大小不能超过 2MB!');        return false;      }      return true;    };    const uploadFile = () => {      fileList.value[0].upload();    };    const handleSuccess = (response: any, file: File, fileList: any) => {      // 处理上传成功后的逻辑，如显示提示信息    };    return {      fileList,      beforeUpload,      uploadFile,      handleSuccess    };  }};</script>

2. 解析Excel文件: 你可以使用如xlsx这样的第三方库来解析Excel文件。当用户选择文件后，在前端解析Excel内容，并准备发送到后端。

import XLSX from 'xlsx';// ...const handleFileChange = (event: any) => {  const file = event.target.files[0];  const reader = new FileReader();  reader.onload = (e: any) => {    const data = new Uint8Array(e.target.result);    const workbook = XLSX.read(data, { type: 'array' });    const sheetName = workbook.SheetNames[0];    const worksheet = workbook.Sheets[sheetName];    const jsonData = XLSX.utils.sheet_to_json(worksheet);    // 现在你有了一个jsonData数组，其中包含Excel文件的数据    // 你可以将其发送到后端  };  reader.readAsArrayBuffer(file);};

3. 发送数据到后端: 使用Axios或Fetch API发送一个POST请求到后端的API端点，附带解析后的Excel数据。

import axios from 'axios';// ...axios.post('/api/import', jsonData)  .then(response => {    // 处理响应  })  .catch(error => {    // 处理错误  });

后端部分 (.NET 6 Web API)

1. 创建API端点: 在你的.NET 6 Web API项目中，创建一个新的Controller来处理文件上传和数据处理。

[ApiController][Route("[controller]")]public class ExcelImportController : ControllerBase{    [HttpPost]    public async Task<IActionResult> UploadAndImport([FromForm] IFormFile file)    {        // 处理文件上传和导入逻辑    }}

2. 处理文件上传和导入: 在你的API方法中，接收上传的文件，并使用如ClosedXML或EPPlus这样的库来读取Excel文件内容。然后，你可以将解析后的数据保存到数据库中。

[HttpPost]public async Task<IActionResult> UploadAndImport([FromForm] IFormFile file){