如何将React.js应用的CSV文件上传到Node.js服务端并进行后续处理

存在的问题及调整点：

• useState更新为异步逻辑，调用SetCsvFile后立即读取csvFile获取的是旧值，直接从事件对象取选中的文件即可
• axios发送表单数据的配置字段为data，不是body
• 手动配置multipart/form-data请求头会丢失边界参数，axios会自动适配FormData的请求头，无需手动设置
• e.target.files是文件集合，需要取索引为0的元素拿到实际选中的CSV文件，可选加accept=".csv"限制上传文件类型

修改后的App.js代码：

import './App.css';
import React, { useState } from "react";
import axios from 'axios'

function App() {
  const [csvFile, SetCsvFile] = useState();
  return (
    <div className="App">
      <header className="App-header">
        <div>
          选择文件
          <input type="file" name="file" accept=".csv" onChange={e => {
            const selectedFile = e.target.files[0]
            SetCsvFile(selectedFile)
            const formData = new FormData();
            formData.append('name', "FILENAME");
            formData.append('file', selectedFile);

            const url = 'http://localhost:8080/EXPRESSENDPOINT';
            axios({
              method: 'POST',
              url: url,
              data: formData
            })
              .then(res => console.log('上传成功', res))
              .catch(err => console.log('上传失败', err));

          }} />
        </div>
      </header>
    </div>
  );
}

export default App;

存在的问题及调整点：

• 先安装cors依赖解决跨域问题，执行命令：npm install cors
• express-fileupload解析后的上传文件存储在req.files属性中，不是req.body
• 路由需要返回响应，否则前端请求会超时挂起
• 明确指定路由为POST方法，避免其他无效请求进入

修改后的服务端代码：

var express = require('express');
var app = express();
const cors = require('cors')
const bodyParser = require("body-parser");
const CsvUpload = require("express-fileupload");

app.use(cors())
app.use(CsvUpload());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.post('/EXPRESSENDPOINT', (req, res) => { 
  console.log('普通请求参数', req.body)
  console.log('上传的CSV文件信息', req.files.file)
  // 此处可添加CSV处理逻辑：读取文件内容、解析数据、存储入库等
  res.json({
    code: 200,
    msg: '文件上传成功',
    fileInfo: req.files.file
  })
});

app.listen(8080, () => {
  console.log('Application listening on port 8080!');
});

先启动Node服务，再启动React应用，选择CSV文件上传后，即可在Node服务控制台看到上传的文件完整信息，后续可以基于req.files.file的内容实现对应的业务处理逻辑。

内容的提问来源于stack exchange，提问作者grishabobr