如何将React应用中的CSV文件上传发送到Node.js服务端

前端（App.js）问题汇总&修复 #

存在的问题： #

• React的useState更新是异步操作，调用SetCsvFile后立刻读取csvFile拿到的是更新前的旧值，首次上传时会读到undefined，无法正确传递文件
• e.target.files是选中的文件列表对象，需要取索引为0的元素才能拿到实际的文件对象
• axios POST请求传递表单数据的配置字段是data，不是body，写body会导致你构造的FormData根本没有被发送
• 不需要手动设置multipart/form-data请求头，浏览器会自动生成携带boundary参数的正确请求头，手动设置反而会丢失boundary导致服务端解析失败
• 前后端端口不同存在跨域问题，不配置的话请求会被浏览器拦截

修复后的App.js代码： #

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

function App() {
  // 如果后续不需要用到选中的文件，这个state可以删掉
  const [csvFile, SetCsvFile] = useState();
  return (
    <div className="App">
      <header className="App-header">
        <div>
          Select file
          <input 
            type="file" 
            name="file" 
            accept=".csv" 
            onChange={async 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';
              try {
                const res = await axios.post(url, formData);
                console.log('上传成功', res.data);
              } catch (err) {
                console.log('上传失败', err);
              }
          }} />
        </div>
      </header>
    </div>
  );
}
export default App;

后端（server.js）问题汇总&修复 #

存在的问题： #

• 路由处理函数既没有给前端返回响应，也没有调用next()方法，会导致请求一直处于挂起状态。浏览器对同一个域名的并发请求上限一般是6个，所以你尝试6次之后所有请求槽位都被占满，自然就没有新的响应了，这就是你说的“仅输出6次后无响应”的根本原因
• express-fileupload中间件解析出的上传文件会挂载在req.files属性下，你打印req.body是看不到上传的文件内容的
• 没有配置跨域中间件，会拦截前端的跨域请求

修复后的server.js代码： #

var express = require('express');
var app = express();
const cors = require('cors');
const fileUpload = require("express-fileupload");

// 配置跨域
app.use(cors());
// 配置文件上传中间件
app.use(fileUpload());

app.post('/EXPRESSENDPOINT', (req, res) => {
  console.log('普通表单字段：', req.body);
  console.log('上传的文件：', req.files.file);
  // 这里可以加你的文件处理逻辑，比如读取csv内容入库之类的
  // 必须给前端返回响应，结束请求
  res.send({ status: 'success', message: '文件上传成功' });
});

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

运行验证步骤 #

1. 先在服务端项目目录安装依赖：npm install express express-fileupload cors
2. 启动服务端：node server.js
3. 启动React前端项目，选择csv文件上传即可正常运行

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