如何通过React代码自动为上传至Cloudinary的图片添加标签

直接在FormData中添加标签是完全可行的，Cloudinary的直接上传API支持通过tags参数传递标签信息，以下是具体实现方案：

核心实现步骤 #

• 构造FormData时，除了图片文件，额外添加tags字段，值为逗号分隔的标签字符串（比如"temp,user-123,web-upload"）
• 请求目标为Cloudinary的上传接口：https://api.cloudinary.com/v1_1/<你的云名称>/image/upload
• 根据上传方式（签名/未签名），携带对应的验证参数（未签名上传用upload_preset，签名上传需包含signature、timestamp、api_key等）

原生JS代码示例（未签名上传） #

// 获取文件输入框和选中的文件
const fileInput = document.getElementById('image-upload');
const selectedFile = fileInput.files[0];

if (!selectedFile) return;

// 构建上传表单数据
const uploadFormData = new FormData();
uploadFormData.append('file', selectedFile);
uploadFormData.append('upload_preset', '你的上传预设名称'); // 替换为你的预设
uploadFormData.append('tags', 'temp,web-upload,user-789'); // 这里添加自定义标签

// 发送上传请求
fetch('https://api.cloudinary.com/v1_1/你的云名称/image/upload', {
  method: 'POST',
  body: uploadFormData
})
.then(res => res.json())
.then(result => {
  console.log('上传完成，资源信息:', result);
  // 建议保存返回的public_id，后续删除时用
})
.catch(err => console.error('上传出错:', err));

注意事项 #

• 标签支持多个，用逗号分隔即可，Cloudinary会自动拆分存储
• 如果使用签名上传，必须将tags参数包含在签名的参数列表中，否则会触发签名验证失败
• 后续清理无用图片时，可以通过Cloudinary Admin API的resources_by_tag接口，按标签筛选资源后批量删除

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