Cloudinary结合React开发：上传图片后如何将URL与对应文件夹存入同一对象

下面分两种场景给出可直接落地的实现方案：

场景1：基于Cloudinary上传返回结果处理（推荐） #

Cloudinary上传成功后，每个文件的返回结果会自带folder字段，存储该文件在Cloudinary上的完整文件夹路径，直接基于这个字段分组即可。

操作步骤： #

1. 上传前确认保留文件夹结构配置
   • 如果你用Cloudinary控制台手动上传，选择父文件夹后要勾选「保留文件夹结构」选项
   • 如果你用SDK调用接口上传，不要主动配置folder参数覆盖原有路径，确保上传时携带的public_id包含完整相对路径
2. 处理返回结果的代码示例：

// 替换为你上传的父文件夹实际名称
const PARENT_FOLDER = 'Parent folder';
// 所有图片上传成功后得到的返回结果数组，每个元素默认包含secure_url(图片URL)、folder两个字段
const uploadResponseList = [/* 替换为你实际拿到的上传返回数据 */];

const groupTemp = {};
uploadResponseList.forEach(item => {
  // 拆分路径获取子文件夹名称
  const pathArr = item.folder.split('/');
  const parentIdx = pathArr.findIndex(seg => seg.trim() === PARENT_FOLDER.trim());
  const childFolder = parentIdx > -1 ? pathArr[parentIdx + 1] : '未分类';
  
  // 按子文件夹分组存入URL
  if (!groupTemp[childFolder]) groupTemp[childFolder] = [];
  groupTemp[childFolder].push(item.secure_url);
});

// 转换为你需要的目标结构
const images = Object.entries(groupTemp).map(([folderName, urlList]) => ({
  folder: folderName,
  image: urlList
}));

场景2：上传前预分组（适合需要提前确认分组结构的场景） #

如果你是通过前端文件选择器选中本地父文件夹，可在上传前先读取所有文件的相对路径完成预分组，上传成功后把URL回填到对应分组即可。

操作步骤： #

1. 监听文件选择事件，提前完成预分组：

const groupTemp = {};
document.querySelector('input[type="file"]').addEventListener('change', (e) => {
  const files = Array.from(e.target.files);
  files.forEach(file => {
    // file.webkitRelativePath 为文件相对于你选中的父文件夹的完整路径
    const pathArr = file.webkitRelativePath.split('/');
    // 路径结构为 父文件夹/子文件夹/文件名，索引1对应子文件夹名
    const childFolder = pathArr[1] || '未分类';
    if (!groupTemp[childFolder]) groupTemp[childFolder] = [];
    // 先存文件对象，后续上传成功后替换为URL
    groupTemp[childFolder].push({ file, url: '' });
  });
});

2. 批量上传所有文件，上传成功后把返回的secure_url赋值给对应项的url字段，最后提取URL生成目标结构即可。

注意事项 #

• 如果文件夹名包含特殊字符、空格，建议上传前统一做标准化处理，避免路径拆分时匹配出错
• 如果存在直接放在父文件夹下、没有子文件夹归属的图片，上面的代码会自动归类到「未分类」组，可根据需求调整逻辑

内容的提问来源于stack exchange，提问作者Nguyễn Văn Huy