当前位置：首页 > uni-app

uniapp 表格导入

2026-03-04 22:16:20uni-app

使用 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 为例：

uniapp 表格导入

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();
  });
});