Multer无法读取多文件问题排查：Ajax上传多图片与表单数据至Node.js的错误解决及优化方案

错误原因：字段名不匹配 #

你遇到的MulterError: Unexpected field错误，核心问题是前端FormData中文件的字段名和后端Multer配置的字段名不一致：

• 前端代码里，你用fd.append("image", image);把文件添加到名为image的字段中
• 但后端Multer配置是multer({ storage: storage }).array("pImg");，它只处理名为pImg的字段文件

Multer只会识别配置中指定的字段名，当它收到未配置的image字段文件时，就会抛出"Unexpected field"的错误。

解决步骤：统一字段名 + 正确解析表单数据 #

1. 修正字段名匹配 #

选以下任意一种方式即可：

方式一：修改前端代码，对齐后端字段名

imageFiles.forEach(image => {
    fd.append("pImg", image); // 把"image"改成"pImg"，和后端Multer配置一致
});

方式二：修改后端Multer配置，对齐前端字段名

const upload = multer({ storage: storage }).array("image"); // 把"pImg"改成"image"

2. 解析表单中的JSON数据 #

前端你把表单数据转成JSON后存在info字段，后端需要解析这个JSON才能拿到具体的产品信息：

app.post('/addproduct', (req, res) => {
    upload(req, res, (err) => {
        if(err) {
            console.log(err);
            return res.status(500).json({error: err.message});
        }else {
            // 解析info字段的JSON数据
            const productInfo = JSON.parse(req.body.info);
            console.log("产品信息：", productInfo);
            console.log("上传的文件数组：", req.files); // 用req.files获取文件数组（array()方法对应）
            // 这里可以添加保存到数据库等业务逻辑
            res.status(200).json({message: "产品添加成功"});
        }
    });
});

更优的实现方式：直接将表单字段添加到FormData #

你当前把表单数据转成JSON再append的方式有点冗余，其实可以直接把每个表单字段单独添加到FormData中，后端不需要额外解析JSON，直接从req.body获取更直观：

优化后的前端代码 #

const addForm = document.querySelector('#addForm');
addForm.addEventListener('submit', (event) => {
    event.preventDefault();
    const fd = new FormData(); // 把FormData创建移到事件内部，避免重复使用同一实例导致的异常

    // 直接添加单个表单字段
    fd.append("Cost", document.getElementById('addPcost').value);
    fd.append("Size", document.querySelectorAll('[name="size"]:checked')[0].value);
    fd.append("Material", document.querySelectorAll('[name="material"]:checked')[0].value);
    fd.append("Color", document.getElementById('addPcolor').value);
    fd.append("Category", document.querySelectorAll('[name="category"]:checked')[0].value);

    // 添加文件数组（字段名和后端保持一致）
    imageFiles.forEach(image => {
        fd.append("pImg", image);
    });

    $.ajax({
        type: "POST",
        url: "/addproduct",
        contentType: false,
        processData: false,
        data: fd,
        success: () => {
            Notiflix.Notify.Success("new product added successfully.");
        },
        error: (textStatus, err) => {
            Notiflix.Notify.Failure('<h2>Internal Server Error</h2><br>' + 'text status ' + textStatus + ', err ' + err);
        }
    });
});

优化后的后端代码 #

app.post('/addproduct', (req, res) => {
    upload(req, res, (err) => {
        if(err) {
            console.log(err);
            return res.status(500).json({error: err.message});
        }else {
            // 直接从req.body获取表单字段
            const { Cost, Size, Material, Color, Category } = req.body;
            console.log("产品信息：", { Cost, Size, Material, Color, Category });
            console.log("上传的文件数组：", req.files);
            // 后续业务逻辑（如存入数据库）
            res.status(200).json({message: "产品添加成功"});
        }
    });
});

额外注意事项 #

• 确保imageFiles是正确获取到的文件数组（比如通过<input type="file" multiple>的files属性获取）
• Multer的array()方法会把文件数组放在req.files中，单个文件用single()才是req.file
• 后端记得处理错误情况，返回合适的HTTP状态码给前端，方便前端做用户反馈

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