Node.js中如何正确上传含对象数组的多图片（亲属照片）

1. 前端FormData处理错误：你把整个siblingsDetails序列化为JSON字符串上传，但File对象无法被JSON序列化，导致siblingsPhoto变成空对象；同时multer期望接收单独的siblingsPhoto字段（数组形式），但前端并未传递该字段，所以后端req.files.siblingsPhoto为空。
2. 前后端字段不匹配：后端multer配置了siblingsPhoto字段接收多张图片，但前端没有单独传递这个字段，而是把图片嵌套在siblingsDetails的JSON里。

前端React修改：正确构建FormData #

修改handleSubmit中的FormData逻辑，拆分处理兄弟照片和兄弟信息：

const handleSubmit = async (event: any) => {
    event.preventDefault()
    setValidated(true)
    let error = hasError(formData)
    if (isEmpty(error)) {
        let data = new FormData()
        // 处理普通单张照片和非数组字段
        Object.keys(formData).forEach((key) => {
            if (key !== 'siblingsDetails' && key !== 'isSiblings') {
                data.append(key, formData[key])
            }
        })
        // 处理兄弟信息和照片
        if (formData.isSiblings === 'Yes' && formData.siblingsDetails.length > 0) {
            // 传递剥离照片后的兄弟基础信息
            data.append('siblingsDetails', JSON.stringify(
                formData.siblingsDetails.map(sibling => {
                    const { siblingsPhoto, ...rest } = sibling
                    return rest
                })
            ))
            // 单独传递每张兄弟照片，multer会自动识别为数组
            formData.siblingsDetails.forEach(sibling => {
                if (sibling.siblingsPhoto) {
                    data.append('siblingsPhoto', sibling.siblingsPhoto)
                }
            })
        } else {
            data.append('siblingsDetails', JSON.stringify([]))
        }
        await applyCareer(data)
    } else {
        const a = Object.keys(error)
        event.target.querySelector('#' + a[0]).focus()
        setErrors(error)
    }
}

注意：确保formData.siblingsDetails中的siblingsPhoto是File对象（而非字符串路径），需要通过<input type="file" onChange={(e) => { /* 将e.target.files[0]存入formData */ }} />这类控件正确获取文件。

后端Node.js修改：关联照片与兄弟信息 #

后端需要将multer接收的siblingsPhoto数组，和前端传递的siblingsDetails信息对应起来：

import multer from "multer";
const router = express.Router();
const path = require('path'); // 确保引入path模块

const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        let dest = '';
        switch(file.fieldname) {
            case 'motherPhoto':
                dest = 'uploads/careers/personalInfo/motherPhoto/';
                break;
            case 'fatherPhoto':
                dest = 'uploads/careers/personalInfo/fatherPhoto/';
                break;
            case 'spousePhoto':
                dest = 'uploads/careers/personalInfo/spousePhoto/';
                break;
            case 'siblingsPhoto':
                dest = 'uploads/careers/personalInfo/siblingsPhoto/';
                break;
            default:
                dest = 'uploads/careers/personalInfo/other/';
        }
        cb(null, dest);
    },
    filename: function (req, file, cb) {
        const userId = req.headers.applicant;
        let filename = '';
        const ext = file.mimetype.split('/')[1];
        switch(file.fieldname) {
            case 'fatherPhoto':
                filename = `${userId}_Father_${Date.now()}.${ext}`;
                break;
            case 'motherPhoto':
                filename = `${userId}_mother_${Date.now()}.${ext}`;
                break;
            case 'spousePhoto':
                filename = `${userId}_spouse_${Date.now()}.${ext}`;
                break;
            case 'siblingsPhoto':
                filename = `${userId}_sibling_${Date.now()}.${ext}`;
                break;
            default:
                filename = `${userId}_${Date.now()}.${ext}`;
        }
        cb(null, filename);
    },
});

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

router.post("/add/personalInfo", upload.fields([
    { name: 'passportImage', maxCount: 1 },
    { name: 'fatherPhoto', maxCount: 1 },
    { name: 'motherPhoto', maxCount: 1 },
    { name: 'spousePhoto', maxCount: 1 },
    { name: 'siblingsPhoto', maxCount: 10 }
]), async(req,res)=>{
    try {
        // 解析兄弟基础信息
        const siblingsDetails = JSON.parse(req.body.siblingsDetails || '[]');
        // 将照片路径与兄弟信息一一关联
        const siblingsWithPhotos = siblingsDetails.map((sibling, index) => {
            if (req.files?.siblingsPhoto && req.files.siblingsPhoto[index]) {
                return {
                    ...sibling,
                    siblingsPhoto: req.files.siblingsPhoto[index].path // 存储照片的服务器路径
                };
            }
            return sibling;
        });
        // 后续可使用处理后的兄弟信息和其他文件数据
        console.log('处理后的兄弟信息:', siblingsWithPhotos);
        console.log('所有上传文件:', req.files);
        res.status(200).send({ message: '上传成功', data: { siblingsWithPhotos, files: req.files } });
    } catch (error) {
        console.error(error);
        res.status(500).send({ message: '上传失败', error: error.message });
    }
})

• 前端必须确保siblingsPhoto是File对象，浏览器显示的C:/fakepath/...是安全伪装的路径，实际需要获取input控件的files[0]。
• 后端解析siblingsDetails时要做异常处理，避免JSON解析失败。
• multer的maxCount要设置足够大，满足兄弟照片的数量需求。

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