如何在 Node.js 中上传对象数组（多个图像文件）

Question

我的应用程序出现问题。这是对象，我们有 motherPhoto、fatherPhoto、spousePhoto 和siblingsPhoto 要上传..

{
  "mothername": "kerin",
  "motherPhoto": "C:/fakepath/mother.jpg",
  "fathername": "kako",
  "fatherPhoto": "C:/fakepath/father.jpg",
  "spousename": "kiki",
  "spousePhoto": "C:/fakepath/wife.jpg",
  "siblingDetails": [
    {
      "siblingsName": "",
      "siblingsDob": "",
      "siblingsEmail": "",
      "siblingsPhone": "",
      "siblingsPhoto": "C:/fakepath/LW.jpg"
    },
    {
      "siblingsName": "",
      "siblingsDob": "",
      "siblingsEmail": "",
      "siblingsPhone": "",
      "siblingsPhoto": "C:/fakepath/LW1.jpg"
    },
    {
      "siblingsName": "",
      "siblingsDob": "",
      "siblingsEmail": "",
      "siblingsPhone": "",
      "siblingsPhoto": "C:/fakepath/LW2.jpg"
    },
    {
      "siblingsName": "",
      "siblingsDob": "",
      "siblingsEmail": "",
      "siblingsPhone": "",
      "siblingsPhoto": "C:/fakepath/LW4.jpg"
    }
  ]
}

我能够获取 motherPhoto、fatherPhoto、spousePhoto 但siblingsPhoto 在反应中是 {} 空对象：

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') {
                    if (formData.isSiblings === 'No') {
                        data.append('siblingsDetails', JSON.stringify([]))
                    } else {
                        console.log(formData[key], 'formData[key]')
                        data.append(key, JSON.stringify(formData[key]))
                    }
                } else {
                    data.append(key, formData[key])
                }
            })
            await applyCareer(data)
        } else {
            
            const a = Object.keys(error)
            event.target.querySelector('#' + a[0]).focus()
            setErrors(error)
        }
    }
    const applyCareer = async (data: any) => {
        try {
            await axios.post(
                `${import.meta.env.VITE_API_URL}job-applications/add/personalInfo`,
                data,
                {
                    headers: {
                        applicant: 'hello',
                        'Content-Type': 'multipart/form-data',
                    },
                }
            )
        } catch (error) {
            throw error
        }
    }

在nodejs中

import multer from "multer";

const router = express.Router();
const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        if (file.fieldname === 'motherPhoto') {
        cb(null, 'uploads/careers/personalInfo/motherPhoto/');

      }else if (file.fieldname === 'fatherPhoto') {
        cb(null, 'uploads/careers/personalInfo/fatherPhoto/');

      }else if (file.fieldname === 'spousePhoto') {
       cb(null, 'uploads/careers/personalInfo/spousePhoto/');

     }else  if (file.fieldname === 'siblingsPhoto') {
        cb(null, 'uploads/careers/personalInfo/siblingsPhoto/');

      } 
    },
    filename: function (req, file, cb) {

 
      const userId = req.headers.applicant;
      let filename = '';
    
      if (file.fieldname === 'fatherPhoto') {
        filename = `${userId}_Father_${Date.now()}.${file.mimetype.split('/')[1]}`;
      } else
      if (file.fieldname === 'motherPhoto') {
        filename = `${userId}_mother_${Date.now()}.${file.mimetype.split('/')[1]}`;
      } else
      if (file.fieldname === 'spousePhoto') {
        filename = `${userId}_spouse_${Date.now()}.${file.mimetype.split('/')[1]}`;
      }else
    
      if (file.fieldname === 'siblingsPhoto') {
        filename = `${userId}_sibling_${Date.now()}${path.extname(file.originalname)}`;
      } 
  
      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 } // Allow up to 10 sibling photos
  ]),async(req,res)=>{
    try {
        console.log(req.files,'files')
      
      
    } catch (error) {
      res.status(500).send(error);
        
    }
  })

siblingsPhoto 数组未在服务器端正确填充。在 React 代码中，当我检查服务器上的 req.files 时，siblingsPhoto 是一个空对象。

在此设置中，如何正确处理和上传多个兄弟姐妹照片文件以及其他单独的照片字段？

Answer 1

我认为，兄弟数据没有从客户端正确发送；您需要分别附加每个兄弟姐妹的数据。像这样更改上面的 if (key === 'siblingsDetails') 块：

if (key === 'siblingsDetails') {
       // Handle(append) multiple sibling object separatly here
       formData[key]?.forEach((sibling, index) => {
           data.append(`siblingsDetails[${index}][siblingsName]`, sibling.siblingsName);
           data.append(`siblingsDetails[${index}][siblingsDob]`, sibling.siblingsDob);
           data.append(`siblingsDetails[${index}][siblingsEmail]`, sibling.siblingsEmail);
           data.append(`siblingsDetails[${index}][siblingsPhone]`, sibling.siblingsPhone);
           data.append(`siblingsPhoto[${index}]`, sibling.siblingsPhotoFile);
       });
}