向后端传递图片数组时Node.js服务端仅收到首个元素该如何排查

1. Cloudinary批量上传逻辑未正确等待所有异步任务完成 #

调用imageUpload上传多张图片时，如果没有用Promise.all包裹所有单张上传的异步任务，而是在循环中直接处理后就返回数组，会导致函数提前返回，此时数组可能仅完成了第一个上传任务，后续任务还未执行完毕。
正确的上传逻辑示例：

const imageUpload = async (imageFiles) => {
  // 所有上传任务并行执行，等待全部完成后再返回结果
  const uploadPromises = imageFiles.map(file => cloudinary.uploader.upload(file.path, {/* 你的上传配置 */}))
  return await Promise.all(uploadPromises)
}

调用该函数时需要用await等待全部上传完成后再调用postDataAPI。

2. 前端提交参数时数组格式错误 #

• 如果你使用FormData传递数组：不能直接将数组赋值给FormData的单个key，需要循环遍历数组逐个追加，且key要添加[]后缀，否则后端只会识别到第一个元素
  正确写法示例：

  const formData = new FormData()
  // 错误写法：formData.append('images', uploadedImgArr)
  // 正确写法
  uploadedImgArr.forEach(img => {
    formData.append('images[]', img.url) // 此处替换为你实际需要传递的图片字段
  })
  

• 如果你使用JSON格式传递：需要确认请求头的Content-Type设置为application/json，且传递的参数是完整的数组对象，没有被意外截断。

3. Node.js服务端解析配置错误 #

• 如果你使用express框架，使用express.urlencoded解析参数时，需要开启extended: true配置，否则无法正确解析嵌套数组：

  app.use(express.urlencoded({ extended: true }))
  

• 如果使用multer处理FormData，确认接收数组的方法配置正确，array('images', 最大数量)的第二个参数要大于等于你上传的图片数量：

  // 错误示例：最大只允许1张，超过的会被忽略
  // upload.array('images', 1)
  // 正确示例：最大允许10张
  app.post('/your/api/path', upload.array('images', 10), (req, res) => {
    console.log(req.files) // 可获取全部上传的文件
  })
  

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