使用React上传图片至Firebase 9 Storage时报错该如何解决？

1 修复组件代码逻辑错误 #

你当前的Upload组件存在一处逻辑错误，虽然不会直接触发上传失败，但属于bug需要先修正：
原错误代码：

{setImgError && <p>{imgError}</p>}

setImgError是状态更新函数，本身恒为真值，应该修改为判断错误状态本身：

{imgError && <p>{imgError}</p>}

同时可以在handleSubmit函数开头添加兜底判断，避免空值提交：

const handleSubmit = async e => {
    e.preventDefault();
    // 新增兜底判断
    if(!img) return;
    // 剩余原有逻辑
}

2 核心报错排查步骤 #

你遇到的storage/unknown Bad Request错误，按优先级依次排查以下问题：

• 检查Firebase配置的storageBucket字段是否正确，正确格式为你的项目ID.appspot.com，不要填写带路径的存储地址，也不要错填为其他项目的bucket值
• 测试上传文件名仅包含英文、数字的png图片，避免文件名含中文、特殊符号（空格、/、#等）导致的编码错误，若要兼容特殊文件名，构造上传路径时可对文件名做编码处理：

  const uploadPath = `images/${encodeURIComponent(img.name)}`
  

• 检查当前网络环境是否可正常访问Firebase服务，国内直接访问Firebase存储大概率会被拦截，可先测试代理环境下功能是否正常
• 若你是将项目部署到线上后出现该错误，检查Firebase存储的CORS配置是否允许你的站点域名访问，本地开发环境默认不会触发CORS拦截
• 打印完整错误对象获取详细信息，你当前仅打印了err.message，修改catch部分的代码打印完整错误，查看serverResponse字段的返回内容可直接定位问题根因：

  uploadBytes(storageRef, img)
    .then(snapshot => console.log(snapshot))
    .catch(err => console.log('完整错误：', err));
  

3 规则配置验证 #

你当前的存储规则是完全放开读写，不会触发权限拦截，确认规则已经在控制台发布成功即可，无需额外修改。

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