如何在FormData中传递嵌套参数？Angular+Node.js多表关联场景

场景说明 #

在一对多关联的父子表存储场景中，需先存储父表数据，再存储关联的子表图片文件。使用Angular通过FormData传递参数时，需将图片以nestedFiles.image1这类嵌套格式传递，替代原有的扁平image1命名方式，后端基于Node.js实现数据存储。

修改后的Angular前端代码 #

const formData = new FormData();

// 以嵌套格式添加图片文件
if (product.nestedImage.length > 0) {
  for (let i = 0; i < product.nestedImage.length; i++) {
    formData.append(`nestedFiles.image${i + 1}`, product.nestedImage[i]);
  }
}

// 添加父表其他非文件字段
for(let key in product) {
  if (key !== 'nestedImage') {
    formData.append(key, product[key]);
  } 
} 

return this.http.post(this.createImagesDetails, formData,  { observe:'response'})

Node.js后端解析与存储实现 #

要正确解析这种嵌套格式的FormData，需借助multer中间件处理文件上传，同时解析普通表单字段。示例代码如下：

const express = require('express');
const multer = require('multer');
const app = express();

// 配置multer的文件存储规则
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, './uploads/'); // 确保uploads目录已创建
  },
  filename: (req, file, cb) => {
    cb(null, `${Date.now()}-${file.originalname}`);
  }
});

const upload = multer({ storage: storage });

// 处理上传请求
app.post('/api/products', upload.any(), (req, res) => {
  // 提取父表普通字段
  const parentTableData = req.body;
  // 筛选出嵌套格式的图片文件
  const nestedImageFiles = req.files.filter(file => file.fieldName.startsWith('nestedFiles.'));

  // 业务逻辑步骤：
  // 1. 插入父表数据到数据库，获取父表ID
  // 2. 遍历图片文件，插入子表数据并关联父表ID
  // 以下为示例伪代码（需根据实际数据库ORM调整）：
  // ParentModel.create(parentTableData)
  //   .then(parentRecord => {
  //     const childSavePromises = nestedImageFiles.map(file => {
  //       return ChildImageModel.create({
  //         parentId: parentRecord.id,
  //         imagePath: file.path,
  //         originalName: file.originalname
  //       });
  //     });
  //     return Promise.all(childSavePromises);
  //   })
  //   .then(() => res.status(200).json({ msg: '数据存储成功' }))
  //   .catch(err => res.status(500).json({ error: err.message }));

  // 测试用返回，实际需替换为数据库操作
  res.status(200).json({ parentData: parentTableData, images: nestedImageFiles });
});

app.listen(3000, () => console.log('服务运行在3000端口'));

关键说明 #

• 前端通过nestedFiles.imageX作为FormData的键名，模拟嵌套参数结构，这是FormData支持的标准传递方式。
• 后端使用multer的upload.any()接收所有上传文件，再通过字段前缀筛选出嵌套的图片文件。
• 必须遵循先存父表、再存子表的顺序，确保子表能关联到父表的ID。

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