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('文件解析失败，请检查格式');
}
