React上传图片至Node+Multer后端失败求助

问题现象 #

React发送的请求中Content-Length为154，但Node后端接收到的请求中Content-Length显示为null，图片未成功传输到后端，Express中req.files始终是空数组[]。已确认：

• 请求头设置无明显错误
• CORS配置为通配符
• HTML表单和Multer中的字段名均设为'images'

相关代码片段 #

React端uploadImages方法 #

const uploadImages = async e => {
    e.preventDefault();

    const formData = new FormData();
    formData.append("images", e.target[0].files);

    console.log(e.target[0].files);

    await axios.post("http://localhost:8080/product/images/123456", formData, { headers: { 'Content-Type': 'multipart/form-data' } });
}

React表单 #

<form onSubmit={uploadImages} encType="multipart/form-data">
     <input name="images" type="file" accept="image/*" multiple={true}></input>
     <button type="submit">submit</button>
</form>

Node后端代码（部分内容省略） #

const express = require('express');
const bodyParser = require('body-parser');
const jsonParser = bodyParser.json();

const app = express();

const multer = require('multer');
const storage = multer.memoryStorage();
const upload = multer({ storage: storage });

app.use((req, res, next) => {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});

app.post('/product/images/:product_id', upload.array('images', 10), async (req, res) => {
    console.log(req);
    res.sendStatus(200);
});

请求与日志截图 #

• 浏览器发送的请求截图：
  

• 浏览器发送的表单数据截图：
  

后端日志片段 #

<ref *2> IncomingMessage {
  // 此处省略日志内容
  body: [Object: null prototype] { images: '[object FileList]' },
  files: [],
  // 此处省略日志内容
}

问题原因与解决方法 #

核心问题 #

1. FormData追加方式错误：直接将FileList对象传给formData.append()，但FormData不支持直接追加FileList，只能逐个追加单个File对象。后端日志里的images: '[object FileList]'就是证据——这说明FormData中存的是FileList的字符串形式，而非实际文件内容。
2. 手动设置Content-Type错误：multipart/form-data请求需要自动生成的boundary分隔符，手动设置Content-Type会丢失该分隔符，导致后端无法正确解析表单数据。

修正后的React代码 #

const uploadImages = async e => {
    e.preventDefault();

    const formData = new FormData();
    // 遍历FileList，逐个追加文件
    Array.from(e.target[0].files).forEach(file => {
        formData.append("images", file);
    });

    console.log(e.target[0].files);

    // 移除手动设置的Content-Type，让axios自动处理请求头
    await axios.post("http://localhost:8080/product/images/123456", formData);
}

额外注意点 #

• 后端的bodyParser.json()不会影响multipart/form-data请求的解析，multer会正常处理该类型请求。
• 确认前端input的multiple属性生效，确保用户可以选择多个文件。

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