使用Fetch上传图片至Cloudinary遇400错误：上传预设指定问题

你这段代码的核心问题是用JSON格式提交了文件上传请求，但Cloudinary的无签名上传要求用multipart/form-data格式（表单形式）提交，JSON格式下后端无法正确识别你传的upload_preset参数，所以才会报“必须指定上传预设”的错误。

修正步骤 #

• 使用FormData构建请求体，这是前端上传文件的标准方式
• 将文件、cloud_name、upload_preset逐一添加到FormData实例中
• 无需手动设置Content-Type，浏览器会自动处理multipart/form-data的请求头

修正后的代码 #

export async function uploadImageToCloudinary(file: File) {
  const url = `https://api.cloudinary.com/v1_1/${cloudName}/upload`;
  const formData = new FormData();
  
  // 添加要上传的文件
  formData.append('file', file);
  // 添加Cloudinary配置参数
  formData.append('cloud_name', cloudName);
  formData.append('upload_preset', 'unsigned');

  const fetched = await fetch(url, {
    method: "post",
    body: formData, // 直接传递FormData，无需JSON序列化
  });

  const parsed = await fetched.json();
  console.log({ parsed });
}

另外确认你的上传预设已开启“无签名上传”权限（从你提供的截图来看配置是正确的），修正代码后即可正常完成文件上传。

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