无报错但上传至Firebase Storage的图片无法打开、格式不支持问题求助

问题根因 #

你的核心问题出在uploadBytes方法的参数传值错误：

• uploadBytes的第二个参数要求传入Blob/File类型的实际文件对象，但你两次写的代码都传入了表示存储路径的字符串，相当于把纯文本路径当成了文件内容上传到Firebase Storage，生成的文件根本不是图片格式，自然无法打开、也无法在img标签中正常渲染。
• 除此之外你还有一处逻辑错误：!selected.size > 100000的运算符优先级错误，!优先级高于比较运算符，实际执行逻辑是先把文件大小转为布尔值取反，再和100000比较，永远返回false，图片大小校验完全失效。

修正方案 #

1. 修复文件大小校验逻辑 #

修改handleFileChange中的大小判断代码：

// 原错误代码
// if (!selected.size > 100000) {
// 修正后代码
if (selected.size > 100000) {
  setImgError("Image file size must be less than 100kb.");
  return;
}

2. 修复文件上传逻辑 #

你对ref函数第二个参数的理解是正确的，它就是文件在Firebase Storage中的存储路径，只需要修改uploadBytes的入参即可：

const handleSubmit = async (e) => {
  e.preventDefault();
  let time = new Date().valueOf();
  const storage = getStorage();
  // 存储路径按你的需求定义即可，没有特殊格式要求
  const storageRef = ref(storage, `images/${user.uid}/${time}/${image.name}`);

  // 第二个参数传入你存在state中的File类型对象image，不是字符串路径
  await uploadBytes(storageRef, image).then(async (snapshot) => {
    const url = await getDownloadURL(snapshot.ref);
    await addDoc(collection(db, "posts"), {
      uid: user.uid,
      caption: caption,
      post: post,
      displayName: user.displayName,
      imgURL: url,
      comments: [],
      likes: [],
    });
  });
  setCaption("");
  setPost("");
  history.push("/home");
};

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