vue.js 上传excel

<template>
  <div>
    <input type="file" @change="handleFileUpload" accept=".xlsx, .xls" />
    <button @click="submitFile">上传</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';

const file = ref(null);

function handleFileUpload(event) {
  file.value = event.target.files[0];
}

async function submitFile() {
  if (!file.value) return;

  const formData = new FormData();
  formData.append('file', file.value);

  try {
    const response = await axios.post('/api/upload-excel', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    });
    console.log('文件上传成功:', response.data);
  } catch (error) {
    console.error('文件上传失败:', error);
  }
}
</script>

const express = require('express');
const xlsx = require('xlsx');
const multer = require('multer');

const app = express();
const upload = multer({ dest: 'uploads/' });

app.post('/api/upload-excel', upload.single('file'), (req, res) => {
  const workbook = xlsx.readFile(req.file.path);
  const sheetName = workbook.SheetNames[0];
  const worksheet = workbook.Sheets[sheetName];
  const data = xlsx.utils.sheet_to_json(worksheet);

  console.log(data); // 处理数据
  res.send('文件上传并处理成功');
});

app.listen(3000, () => {
  console.log('服务器运行在 http://localhost:3000');
});