vue实现上传表格

Vue 实现表格上传功能

安装依赖

使用 xlsx 库处理 Excel 文件，安装命令：

npm install xlsx

前端上传组件

创建文件上传组件，支持拖放或点击上传：

<template>
  <div>
    <input type="file" @change="handleFile" accept=".xlsx, .xls, .csv" />
    <table v-if="tableData.length">
      <thead>
        <tr>
          <th v-for="header in headers" :key="header">{{ header }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, index) in tableData" :key="index">
          <td v-for="(value, key) in row" :key="key">{{ value }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import * as XLSX from 'xlsx';

export default {
  data() {
    return {
      tableData: [],
      headers: []
    };
  },
  methods: {
    handleFile(e) {
      const file = e.target.files[0];
      const reader = new FileReader();
      reader.onload = (e) => {
        const data = new Uint8Array(e.target.result);
        const workbook = XLSX.read(data, { type: 'array' });
        const firstSheet = workbook.Sheets[workbook.SheetNames[0]];
        const jsonData = XLSX.utils.sheet_to_json(firstSheet);
        this.headers = Object.keys(jsonData[0]);
        this.tableData = jsonData;
      };
      reader.readAsArrayBuffer(file);
    }
  }
};
</script>

后端处理（Node.js示例）

创建 API 接口接收上传文件：

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

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

app.post('/upload', upload.single('file'), (req, res) => {
  const workbook = XLSX.readFile(req.file.path);
  const sheet = workbook.Sheets[workbook.SheetNames[0]];
  const data = XLSX.utils.sheet_to_json(sheet);
  res.json({ success: true, data });
});

app.listen(3000, () => console.log('Server running'));

数据验证

添加前端验证确保文件类型正确：

methods: {
  handleFile(e) {
    const file = e.target.files[0];
    if (!file) return;

    const validTypes = ['application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'];
    if (!validTypes.includes(file.type)) {
      alert('请上传有效的Excel文件');
      return;
    }
    // 继续处理文件...
  }
}

性能优化

对于大文件采用分片读取：

reader.onload = (e) => {
  const data = new Uint8Array(e.target.result);
  const workbook = XLSX.read(data, { type: 'array', sheetRows: 1000 }); // 限制行数
  // ...
};

错误处理

添加异常捕获机制：

try {
  const workbook = XLSX.read(data, { type: 'array' });
  // ...
} catch (error) {
  console.error('文件解析失败:', error);
  alert('文件解析失败，请检查格式');
}