当前位置：首页 > VUE

vue实现上传表格

2026-01-16 00:08:57VUE

Vue实现上传表格的方法

使用Element UI上传组件

Element UI提供了el-upload组件，可以方便地实现文件上传功能。需要安装Element UI并引入相关组件。

安装Element UI：

npm install element-ui -S

在Vue组件中使用：

<template>
  <el-upload
    class="upload-demo"
    action="/api/upload"
    :on-success="handleSuccess"
    :before-upload="beforeUpload"
    :file-list="fileList">
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">只能上传xlsx/xls文件</div>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      fileList: []
    }
  },
  methods: {
    beforeUpload(file) {
      const isExcel = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || 
                     file.type === 'application/vnd.ms-excel';
      if (!isExcel) {
        this.$message.error('只能上传Excel文件!');
      }
      return isExcel;
    },
    handleSuccess(response, file) {
      this.$message.success('上传成功');
      // 处理表格数据
    }
  }
}
</script>

使用xlsx库解析Excel文件

安装xlsx库：

npm install xlsx

解析上传的Excel文件：

methods: {
  beforeUpload(file) {
    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);
      console.log(jsonData); // 获取表格数据
    };
    reader.readAsArrayBuffer(file);
    return false; // 阻止自动上传
  }
}

自定义上传组件实现

如果不使用UI库，可以创建自定义上传组件：

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

<script>
import XLSX from 'xlsx';

export default {
  data() {
    return {
      file: null
    }
  },
  methods: {
    handleFileChange(e) {
      this.file = e.target.files[0];
    },
    uploadFile() {
      if (!this.file) return;

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

      // 使用axios发送请求
      axios.post('/api/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(response => {
        console.log('上传成功', response);
      });
    }
  }
}
</script>

服务器端处理

Node.js Express处理上传示例：

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

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

app.post('/api/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({ data });
});

app.listen(3000);