如何在React应用中批量上传多张图片至Cloudinary？

核心思路 #

• Cloudinary单上传接口仅支持单文件提交，需为数组中每张图片单独创建FormData并发起请求
• 使用Promise.all并行处理所有上传任务，统一等待所有上传完成后处理结果

修改后的完整代码 #

const uploadImages = async () => {
  try {
    // 遍历图片数组，生成每个文件的上传Promise
    const uploadTasks = files.map(async (file) => {
      const formData = new FormData();
      formData.append('file', file);
      formData.append('upload_preset', 'uploads');

      const res = await axios.post('https://api.cloudinary.com/v1_1/**********/image/upload', formData);
      return res.data.url;
    });

    // 等待所有上传完成，获取所有图片URL
    const uploadedUrls = await Promise.all(uploadTasks);
    
    console.log('全部图片上传完成:', uploadedUrls);
    alert('批量上传成功');
  } catch (err) {
    console.error('上传出错:', err);
    alert('批量上传失败，请检查');
  }
};

容错处理补充（可选） #

如果需要允许部分图片上传失败、不中断整体流程，可以把错误处理放到单个上传任务内部：

const uploadTasks = files.map(async (file) => {
  try {
    const formData = new FormData();
    formData.append('file', file);
    formData.append('upload_preset', 'uploads');
    const res = await axios.post('https://api.cloudinary.com/v1_1/**********/image/upload', formData);
    return { success: true, url: res.data.url, fileName: file.name };
  } catch (err) {
    return { success: false, error: err.message, fileName: file.name };
  }
});

// 后续可筛选成功/失败结果
const results = await Promise.all(uploadTasks);
const successUrls = results.filter(item => item.success).map(item => item.url);
const failedItems = results.filter(item => !item.success);
console.log('成功上传的URL:', successUrls);
console.log('上传失败的文件:', failedItems);

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