Node.js：如何在for循环中处理异步代码？Cloudinary上传问题

问题场景 #

你使用multer的memoryStorage获取文件buffer，通过streamifier转成可读流后调用Cloudinary的upload_stream上传，但因为upload_stream是异步回调模式，res.json(fileData)会在所有上传完成前执行，导致返回空数组；若把res.json放入回调，多文件场景下会提前终止循环并返回，无法获取全部上传结果。

你的原始代码：

const upload = async (req, res) => {
    let fileData = [];
    if (req.files) {
        // Save image to cloudinary
        let uploadedFile 
        let buffer
        for(let i = 0; i< req.files.length; i++){
            try {
                buffer = req.files[i].buffer
                uploadedFile = cloudinary.uploader.upload_stream(
                    {
                        folder: "products",
                        resource_type: "image",
                    }, 
                    function(error, result) {
                        fileData.push({
                            fileName: req.files[i].originalname,
                            filePath: result.secure_url,
                        })
                    }
                )
                streamifier.createReadStream(buffer).pipe(uploadedFile)
            } catch (error) {
                res.status(500);
                console.log(error)
                throw new Error('Image could not be Uploaded');
            }
        }
        res.json(fileData)
    }
}

解决思路 #

将回调式的upload_stream包装为Promise，利用async/await或Promise.all控制异步流程，确保所有文件上传完成后再返回结果。

具体实现 #

1. 封装Cloudinary上传为Promise函数

把upload_stream的回调逻辑封装成Promise，方便用异步语法控制：

const uploadToCloudinary = (buffer, originalName) => {
  return new Promise((resolve, reject) => {
    const uploadStream = cloudinary.uploader.upload_stream(
      {
        folder: "products",
        resource_type: "image",
      },
      (error, result) => {
        if (error) {
          reject(new Error('Image could not be Uploaded'));
        } else {
          resolve({
            fileName: originalName,
            filePath: result.secure_url,
          });
        }
      }
    );
    streamifier.createReadStream(buffer).pipe(uploadStream);
  });
};

2. 并行处理多文件上传（推荐）

用Promise.all同时处理所有文件上传，效率更高：

const upload = async (req, res) => {
  if (!req.files) {
    return res.status(400).json({ message: "No files uploaded" });
  }

  try {
    // 并行上传所有文件，等待全部完成后返回结果
    const fileData = await Promise.all(
      req.files.map(file => uploadToCloudinary(file.buffer, file.originalname))
    );
    res.json(fileData);
  } catch (error) {
    res.status(500).json({ message: error.message });
    console.error(error);
  }
};

3. 串行处理多文件上传（可选）

如果需要限制同时上传的文件数量，用for...of循环串行处理：

const upload = async (req, res) => {
  if (!req.files) {
    return res.status(400).json({ message: "No files uploaded" });
  }

  const fileData = [];
  try {
    // 逐个上传文件，等待当前文件完成后再处理下一个
    for (const file of req.files) {
      const uploadResult = await uploadToCloudinary(file.buffer, file.originalname);
      fileData.push(uploadResult);
    }
    res.json(fileData);
  } catch (error) {
    res.status(500).json({ message: error.message });
    console.error(error);
  }
};

关键改进点 #

• 用Promise封装异步操作，解决回调地狱和流程控制问题
• 统一错误处理，避免循环内错误处理的混乱
• 增加无文件上传的边界判断，返回更合理的状态码
• 并行处理大幅提升多文件上传效率，串行模式适合有上传并发限制的场景

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