使用Multer向AWS S3上传多文件（含嵌套对象数组）遇阻

问题现状 #

已实现Quiz模型外层backgroundImage上传至AWS S3，但无法上传questionList数组中每个question的backgroundImage。前端提交FormData时，将每个问题的背景图命名为backgroundImage${index}，并把questionList转为JSON字符串提交，服务器报错：MulterError: Unexpected field。

问题原因 #

当前路由使用uploadFile.single("backgroundImage")，Multer仅允许接收单个名为backgroundImage的文件，其他字段（如backgroundImage0、backgroundImage1）会被判定为非法字段，触发报错。

解决方案 #

1. 修改Multer中间件配置 #

将路由中的single()改为any()，允许接收所有文件字段：

router.post(
  "/createQuiz",
  uploadFile.any(), // 接受所有上传的文件
  verifyToken,
  createQuiz
);

2. 调整前端FormData提交逻辑 #

保留JSON格式的questionList，同时按索引命名问题图片（如questionImage0、questionImage1），避免字段冲突：

const formData = new FormData();
// 提交外层字段
formData.append("title", quiz.title);
formData.append("description", quiz.description);
formData.append("backgroundImage", quiz.backgroundImage);

// 提交问题列表JSON
formData.append("questionList", JSON.stringify(quiz.questionList));

// 提交每个问题的背景图
quiz.questionList.forEach((question, index) => {
  if (question.backgroundImage) {
    formData.append(`questionImage${index}`, question.backgroundImage);
  }
});

3. 后端控制器处理文件上传与关联 #

在createQuiz控制器中，先解析questionList，再分别处理外层背景图和每个问题的背景图，将S3返回的URL替换到对应字段后保存：

export const createQuiz = async (req, res) => {
  try {
    // 解析基础数据
    const quizData = {
      title: req.body.title,
      description: req.body.description,
      questionList: JSON.parse(req.body.questionList)
    };

    // 处理外层背景图
    const outerImage = req.files.find(file => file.fieldname === "backgroundImage");
    if (outerImage) {
      // 调用你的S3上传函数，替换为实际逻辑
      const imageUrl = await uploadToS3(outerImage);
      quizData.backgroundImage = imageUrl;
    }

    // 处理每个问题的背景图
    for (let i = 0; i < quizData.questionList.length; i++) {
      const questionImage = req.files.find(file => file.fieldname === `questionImage${i}`);
      if (questionImage) {
        const imageUrl = await uploadToS3(questionImage);
        quizData.questionList[i].backgroundImage = imageUrl;
      }
    }

    // 保存到MongoDB
    const newQuiz = new Quiz(quizData);
    await newQuiz.save();
    res.status(201).json(newQuiz);
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
};

补充说明 #

• 若想更严谨地限制字段，可使用uploadFile.fields()指定允许的文件字段（但需提前知晓所有可能的字段名，动态索引场景下any()更灵活）。
• 确保你的S3上传函数能正确处理req.files中的文件对象（使用memoryStorage时，文件内容存于file.buffer）。

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