uniapp 表格导入
使用 uni-app 实现表格导入
前端实现
在 uni-app 中，可以通过 input 标签的 type="file" 属性实现文件选择功能。用户选择文件后，使用 FileReader 读取文件内容。
<template>
<view>
<input type="file" @change="handleFileChange" accept=".xlsx, .xls, .csv" />
<button @click="uploadFile">上传</button>
</view>
</template>
<script>
export default {
methods: {
handleFileChange(e) {
const file = e.target.files[0];
const reader = new FileReader();
reader.onload = (event) => {
this.fileData = event.target.result;
};
reader.readAsArrayBuffer(file);
},
uploadFile() {
if (!this.fileData) return;
uni.uploadFile({
url: 'https://your-server.com/api/upload',
filePath: this.fileData,
name: 'file',
success: (res) => {
console.log('上传成功', res);
},
fail: (err) => {
console.error('上传失败', err);
}
});
}
}
};
</script>后端处理
后端接收到文件后，可以使用库如 xlsx（Node.js）或 pandas（Python）解析表格数据。
Node.js 示例：
const express = require('express');
const multer = require('multer');
const xlsx = require('xlsx');
const app = express();
const upload = multer({ dest: 'uploads/' });
app.post('/api/upload', upload.single('file'), (req, res) => {
const workbook = xlsx.readFile(req.file.path);
const sheetName = workbook.SheetNames[0];
const data = xlsx.utils.sheet_to_json(workbook.Sheets[sheetName]);
console.log(data);
res.json({ success: true, data });
});
app.listen(3000, () => console.log('Server running on port 3000'));Python Flask 示例：
from flask import Flask, request, jsonify
import pandas as pd
app = Flask(__name__)
@app.route('/api/upload', methods=['POST'])
def upload_file():
file = request.files['file']
df = pd.read_excel(file) # 或 pd.read_csv(file)
data = df.to_dict('records')
return jsonify({'success': True, 'data': data})
if __name__ == '__main__':
app.run(port=5000)数据校验与处理
解析后的数据需要进行校验，确保符合业务逻辑。例如，检查必填字段是否为空、数据类型是否正确等。
// Node.js 数据校验示例
function validateData(data) {
const errors = [];
data.forEach((row, index) => {
if (!row.name) errors.push(`第 ${index + 1} 行：姓名为空`);
if (isNaN(row.age)) errors.push(`第 ${index + 1} 行：年龄格式错误`);
});
return errors;
}数据存储
校验通过后，将数据存储到数据库。以 MongoDB 为例：
const MongoClient = require('mongodb').MongoClient;
const uri = 'mongodb://localhost:27017';
const client = new MongoClient(uri, { useNewUrlParser: true });
client.connect(err => {
const collection = client.db('test').collection('users');
collection.insertMany(data, (err, result) => {
if (err) console.error('存储失败', err);
else console.log('存储成功', result);
client.close();
});
});注意事项
- 前端需限制文件类型和大小，避免上传非法文件。
- 后端需对上传的文件进行安全检查，防止恶意文件攻击。
- 大数据量导入时，建议分批次处理，避免内存溢出。
通过以上步骤，可以在 uni-app 中实现表格导入功能，并将数据存储到后端数据库。
