MERN项目上传3张及以上图片至Cloudinary报路径类型错误

问题现象 #

• 上传1-2张图片时功能正常，上传3张及以上时触发错误
• 错误提示：the "path" argument must be of type string. received an instance of array
• 控制台返回500内部服务器错误，已排除前端multiple属性问题，确认异常由图片数量触发

问题代码 #

exports.createProduct = catchAsyncError(async (req, res, next) => {
  let images = [];

  if (typeof req.body.images === "string") {
    images.push(req.body.images);
  } else {
    images = req.body.images;
  }

  const imagesLinks = [];

  for (let i = 0; i < images.length; i++) {
    const result = await cloudinary.v2.uploader.upload(images[i], {
      folder: "products",
    });

    imagesLinks.push({
      public_id: result.public_id,
      url: result.secure_url,
    });
  }

  req.body.images = imagesLinks;
  req.body.user = req.user.id;

  const product = await Product.create(req.body);

  res.status(201).json({
    success: true,
    product,
  });
});

问题根源 #

当上传3张及以上图片时，req.body.images被解析成了嵌套数组（而非预期的一维数组）。进入else分支后，images直接被赋值为这个嵌套数组，循环时images[i]是子数组，传给Cloudinary的upload方法时，该方法需要字符串类型的路径/Base64值，因此抛出类型错误。

这种嵌套数组通常是表单解析中间件（如multer、body-parser）在处理多文件字段时的异常解析导致的，图片数量达到阈值后触发了这种解析异常。

修复方案 #

修改images的赋值逻辑，确保最终得到的是一维数组：

exports.createProduct = catchAsyncError(async (req, res, next) => {
  let images = [];

  if (typeof req.body.images === "string") {
    images.push(req.body.images);
  } else {
    // 扁平化数组，处理可能的嵌套结构，确保得到一维数组
    images = Array.isArray(req.body.images) ? req.body.images.flat(Infinity) : [];
  }

  const imagesLinks = [];

  for (let i = 0; i < images.length; i++) {
    // 额外添加类型校验，避免非字符串值传入
    if (typeof images[i] !== "string") continue;
    
    const result = await cloudinary.v2.uploader.upload(images[i], {
      folder: "products",
    });

    imagesLinks.push({
      public_id: result.public_id,
      url: result.secure_url,
    });
  }

  req.body.images = imagesLinks;
  req.body.user = req.user.id;

  const product = await Product.create(req.body);

  res.status(201).json({
    success: true,
    product,
  });
});

关键修改点 #

1. 使用flat(Infinity)将嵌套数组完全扁平化为一维数组，无论嵌套层级多少都能处理
2. 在循环中添加typeof images[i] !== "string"的校验，跳过非字符串值，避免无效调用Cloudinary接口

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