Next.js中Axios+React Hook Form多图上传Cloudinary失败问题

核心问题分析 #

你遇到的问题大概率是上传逻辑不符合Cloudinary的接口要求——Cloudinary的默认单文件上传接口无法处理同一个FormData里的多个文件，或者你在添加文件到FormData时的方式有误。

解决方案1：循环发起单文件上传请求（最稳妥通用） #

Cloudinary的基础上传接口一次只能处理一个文件，所以需要遍历选中的文件，为每个文件单独创建FormData并发起请求：

const uploadHandler = async (e) => {
  // 将FileList转为数组方便遍历
  const files = Array.from(e.target.files);
  // 生成所有上传请求的Promise
  const uploadTasks = files.map(async (file) => {
    const formData = new FormData();
    formData.append('file', file);
    formData.append('upload_preset', '你的上传预设值'); // 替换为你的Cloudinary上传预设
    // 可选：添加folder、public_id等自定义参数

    const response = await fetch('https://api.cloudinary.com/v1_1/你的Cloud名称/image/upload', {
      method: 'POST',
      body: formData,
    });
    return response.json();
  });

  // 等待所有上传完成
  const uploadResults = await Promise.all(uploadTasks);
  // 提取所有图片的URL，发给后端存入MongoDB
  const imageUrls = uploadResults.map(res => res.secure_url);
  
  // 这里调用你的后端接口，把imageUrls数组传过去
  // await fetch('/api/save-images', { method: 'POST', body: JSON.stringify({ images: imageUrls }), headers: { 'Content-Type': 'application/json' } });
};

解决方案2：使用Cloudinary批量上传接口（需配置） #

如果你已经在Cloudinary后台启用了批量上传功能，可以通过添加multi=true参数，在同一个请求中上传多个文件：

const uploadHandler = async (e) => {
  const formData = new FormData();
  const files = Array.from(e.target.files);

  // 注意：每个文件都用同一个键名`file`添加到FormData
  files.forEach(file => {
    formData.append('file', file);
  });
  formData.append('upload_preset', '你的上传预设值');
  formData.append('multi', 'true'); // 开启批量上传模式

  const response = await fetch('https://api.cloudinary.com/v1_1/你的Cloud名称/image/upload', {
    method: 'POST',
    body: formData,
  });
  const uploadResults = await response.json();
  
  // 提取URL并提交给后端
  const imageUrls = uploadResults.map(res => res.secure_url);
  // 调用后端接口保存...
};

必查的错误点 #

• 确认input标签的multiple属性正确设置：<input type="file" multiple accept="image/*" onChange={uploadHandler} />
• 检查Cloudinary上传预设是否允许批量上传，以及文件大小/数量限制
• 不要在遍历文件时重复使用同一个FormData却只提交一次（这会导致Cloudinary仅处理最后一个文件）

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