vue3的setup语法糖上传Excel文件后端解析数据

前端

<template>
  <div>
    <input type="file" ref="fileInput" @change="handleFileChange" />
    <button @click="uploadFile">Upload File</button>
    <div v-if="uploadResult">
      <p>Upload Result: {{ uploadResult }}</p>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import axios from "axios";
const fileInput = ref(null);
const uploadResult = ref(null);

const handleFileChange = () => {
  // 可选：处理文件选择的逻辑
};

const uploadFile = async () => {
  const formData = new FormData();
  formData.append("file", fileInput.value.files[0]);

  try {
    const response = await axios.post(
      "http://localhost:3000/upload",
      formData,
      {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      }
    );
    uploadResult.value = response.data.message; // 假设后端返回一个包含上传结果的消息
  } catch (error) {
    console.error("Error uploading file:", error);
    uploadResult.value = "Upload failed";
  }
};
</script>

<style lang="scss" scoped>
</style>

后端

const express = require('express');
const router = express.Router();
const multer = require('multer');
const xlsx = require('xlsx'); // 用于解析 Excel 文件
// 设置存储文件的目录和文件名
const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, 'upload/')  // 存储到 uploads 目录
    },
    filename: function (req, file, cb) {
        cb(null, file.originalname) // 保留原始文件名
    }
});

// 创建 multer 实例
const upload = multer({ storage: storage });

router.post('/upload', upload.single('file'), (req, res) => {
    try {
        const filePath = req.file.path; // 上传文件的路径
        const workbook = xlsx.readFile(filePath); // 使用 xlsx 库读取 Excel 文件
        const sheetName = workbook.SheetNames[0]; // 假设只有一个工作表
        const worksheet = workbook.Sheets[sheetName];
        const data = xlsx.utils.sheet_to_json(worksheet);

        // 返回解析后的数据
        console.log('接收数据成功', data);
        res.json({ data });
    } catch (error) {
        console.error('Error parsing Excel file:', error);
        res.status(500).json({ error: 'Failed to parse Excel file' });
    }
});

module.exports = router;