React+Node.js使用Multer多图上传失败：返回空数组求助

前端代码问题修复 #

1. 修正文件上传的FormData处理逻辑 #

你当前把图片数组转成JSON字符串传给后端，这不符合Multer的接收要求——Multer只能解析FormData中直接添加的二进制文件对象。需要循环遍历选中的文件，逐个添加到FormData，键名统一为images（和后端upload.array("images",10)配置对应）：

const createProject = async (e) => {
  e.preventDefault();
  const formData = new FormData()
  formData.append("projectName", data.projectName);
  formData.append("projectDesc", data.projectDesc);
  formData.append("startDate", JSON.stringify(startDate));
  // 修正笔误：将重复的projectName键改为endDate，避免覆盖项目名称
  formData.append("endDate", JSON.stringify(endDate));
  // 循环添加每个图片文件
  selectedFiles.forEach(file => {
    formData.append("images", file);
  });
  addProject(formData);
}

2. 修复字段名重复的笔误 #

原代码中误将endDate的键名写成projectName，会覆盖之前传入的项目名称，已在上述代码中修正。

后端代码问题修复 #

修复getResult函数的错误解析逻辑 #

resizeImages函数已经将处理后的文件名存入req.body.images数组，无需再执行JSON.parse（数组不是JSON字符串，强行解析会报错）。修改后的getResult：

const getResult = async (req, res, next) => {
    console.log(req.body.images)
    // 增加空值判断，避免报错
    if (!req.body.images || req.body.images.length <= 0) {
        return res.send(`You must select at least 1 image.`);
    }

    // 直接使用处理好的文件名数组，无需多余转换
    const images = req.body.images.join(", ");
    console.log(`Images were uploaded: ${images}`);
    next();
};

验证流程 #

1. 前端选择图片后，selectedFiles存储包含原生File对象的数组，循环添加到FormData后，后端Multer的upload.array("images",10)可正确识别文件，存入req.files。
2. resizeImages处理req.files中的文件，生成压缩后的图片文件，并将文件名存入req.body.images数组。
3. getResult可正常读取req.body.images数组，不再返回“必须选择至少一张图片”的错误。

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