vue实现上传表哥

Vue 实现上传表格

在 Vue 中实现上传表格功能，通常涉及文件上传、文件解析（如 Excel 或 CSV）以及数据展示。以下是具体实现方法：

使用 Element UI 上传组件

Element UI 提供了 el-upload 组件，可以方便地实现文件上传功能。

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

<script>
export default {
  data() {
    return {
      fileList: []
    };
  },
  methods: {
    beforeUpload(file) {
      const isExcel = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
      const isCSV = file.type === 'text/csv';
      if (!isExcel && !isCSV) {
        this.$message.error('只能上传 Excel 或 CSV 文件');
        return false;
      }
      return true;
    },
    handleSuccess(response, file) {
      this.$message.success('上传成功');
      // 处理上传后的数据
    }
  }
};
</script>

解析 Excel 文件

使用 xlsx 库解析上传的 Excel 文件。

<template>
  <input type="file" @change="handleFileChange" accept=".xlsx, .xls, .csv" />
</template>

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

export default {
  methods: {
    handleFileChange(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);
        console.log(jsonData); // 解析后的表格数据
      };
      reader.readAsArrayBuffer(file);
    }
  }
};
</script>

显示表格数据

将解析后的数据展示在页面上。

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column
      v-for="(header, index) in headers"
      :key="index"
      :prop="header"
      :label="header">
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      headers: []
    };
  },
  methods: {
    handleFileChange(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]];
        this.tableData = XLSX.utils.sheet_to_json(firstSheet);
        this.headers = Object.keys(this.tableData[0] || {});
      };
      reader.readAsArrayBuffer(file);
    }
  }
};
</script>

后端接口处理

如果需要将上传的表格数据发送到后端，可以使用 axios 发送请求。

import axios from 'axios';

export default {
  methods: {
    async uploadFile(file) {
      const formData = new FormData();
      formData.append('file', file);
      try {
        const response = await axios.post('/api/upload', formData, {
          headers: { 'Content-Type': 'multipart/form-data' }
        });
        console.log(response.data);
      } catch (error) {
        console.error(error);
      }
    }
  }
};

注意事项

• 文件类型验证：确保上传的文件是 Excel 或 CSV 格式。
• 文件大小限制：可以在 beforeUpload 方法中添加文件大小验证。
• 错误处理：上传或解析失败时提供友好的错误提示。

通过以上方法，可以在 Vue 中实现上传并解析表格的功能。