React表单文件上传至Express后端时数据无法读取求助

问题场景 #

前端通过React构建表单上传文件及文本字段，已在FormData中正确添加areaOrcamentaria（值为teste1）和2个XML文件，前端打印验证数据存在，但后端Express接收请求时req.body为空对象。需求是无需存储文件，仅将XML转换为JSON。

前端React提交代码 #

const handleSubmit = async (e) => {
    e.preventDefault();
    setDisabled(true);
    const formData = new FormData();
    formData.append("areaOrcamentaria", areaOrcamentaria);
    for (let i = 0; i < files.length; i++) {
        formData.append("files", files[i]);
    }
    for (var value of formData.values()) {
        console.log(value);
    }

    axios
        .post("http://localhost:5001/nfe/upload", formData)
        .then((res) => {
            console.log(res);
        })
        .catch((err) => {
            console.log(err);
        });
};

后端Express配置及代码 #

服务器index.js路由配置

app.use("/nfe", nfeRoutes);

nfeRoutes路由文件

import express from "express";
import { postNfe } from "../controllers/nfe.js";

const router = express.Router();

// NFE
router.post("/upload", postNfe)

export default router;

postNfe控制器代码

export const postNfe = async (req, res) => {
    console.log("postNfe");
    console.log(req.body);
    res.status(200).json({ message: "NFE received" });
};

解决方法 #

Express默认无法解析multipart/form-data类型的请求体，需通过中间件处理，结合需求（不存储文件，仅解析XML），步骤如下：

1. 安装依赖
   安装处理表单数据的multer和XML转JSON的xml2js：

npm install multer xml2js

2. 配置multer中间件
   修改nfeRoutes文件，使用内存存储模式（不写入磁盘）：

import express from "express";
import { postNfe } from "../controllers/nfe.js";
import multer from "multer";

// 配置内存存储，仅在内存中保留文件buffer
const storage = multer.memoryStorage();
const upload = multer({ storage: storage });

const router = express.Router();

// 处理多个名为"files"的上传文件，第二个参数为最大数量，可按需调整
router.post("/upload", upload.array("files"), postNfe);

export default router;

3. 修改控制器解析数据
   在postNfe中获取文本字段和文件buffer，解析XML为JSON：

import { parseStringPromise } from "xml2js";

export const postNfe = async (req, res) => {
    console.log("文本字段：", req.body); // 可正常获取areaOrcamentaria
    console.log("上传文件列表：", req.files); // 每个文件包含buffer、originalname等属性

    try {
        // 批量解析XML文件为JSON
        const parsedResults = await Promise.all(
            req.files.map(async (file) => {
                const xmlContent = file.buffer.toString("utf8");
                const jsonData = await parseStringPromise(xmlContent);
                return {
                    filename: file.originalname,
                    json: jsonData
                };
            })
        );

        res.status(200).json({
            message: "NFE解析完成",
            areaOrcamentaria: req.body.areaOrcamentaria,
            parsedData: parsedResults
        });
    } catch (err) {
        res.status(500).json({ message: "XML解析失败", error: err.message });
    }
};

4. 关键注意事项

• axios发送FormData时，无需手动设置Content-Type，axios会自动添加正确的multipart/form-data请求头及边界标识，手动设置可能导致解析失败。
• 若仅上传单个文件，可将upload.array("files")替换为upload.single("file")，对应控制器中用req.file获取文件数据。

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