React项目调用ImgBB API上传图片报130错误的解决咨询

你遇到的这个错误，核心原因是手动设置了multipart/form-data请求头。当用Fetch发送FormData时，浏览器会自动生成包含boundary的正确content-type头，手动设置会覆盖这个自动生成的头，导致服务器无法正确解析FormData里的文件内容，进而判定上传源为空。

解决步骤 #

• 直接移除headers里的content-type配置，让Fetch自动处理请求头
• 上传前校验是否选中了文件，避免空文件提交

修改后的代码示例 #

const handleFileUpload = (e) => {
  // 先校验是否选中文件
  if (!e.target.files || e.target.files.length === 0) {
    console.log("请选择要上传的文件");
    return;
  }

  const formData = new FormData();
  formData.append("file", e.target.files[0]);
  
  const url = `https://api.imgbb.com/1/upload?key=MY_KEY`;
  fetch(url, {
    method: 'POST',
    // 移除手动设置的content-type，让浏览器自动生成
    body: formData
  })
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error("上传失败:", err));
}

补充说明 #

• 不要尝试手动添加boundary，浏览器生成的boundary是随机唯一的，手动设置极易出错
• 直接打印FormData看不到内容，可通过formData.get("file")检查是否正确添加了文件，或者在浏览器开发者工具的Network面板里查看请求的FormData内容

内容的提问来源于stack exchange，提问作者Jalal Ahmed Nafiz