Firebase Storage上传SVG文件提示文件为空的问题排查

问题根源 #

你调用uploadToFirebase时传入的是文件路径字符串"../public/avatar.svg"，但Firebase的uploadBytesResumable方法要求第二个参数必须是Blob或File对象，而非路径字符串。这导致上传的内容为空，所以下载时提示“文件为空”。

解决方案 #

需要先将静态SVG文件转换为Blob/File对象，再传入上传函数。以下是修正后的完整代码：

1. 优化上传函数（支持Promise调用）

import { getStorage, ref, uploadBytesResumable, getDownloadURL } from "firebase/storage"

export const uploadToFirebase = (file) => {
  return new Promise((resolve, reject) => {
    const storage = getStorage()
    const storageRef = ref(storage, "images/avatar.svg")
    const metadata = {
      contentType: "image/svg+xml",
    }
    const uploadTask = uploadBytesResumable(storageRef, file, metadata)

    uploadTask.on(
      "state_changed",
      (snapshot) => {
        const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100
        console.log("上传进度：" + progress + "%")
        switch (snapshot.state) {
          case "paused":
            console.log("上传已暂停")
            break
          case "running":
            console.log("上传中")
            break
        }
      },
      (error) => {
        reject(error)
        switch (error.code) {
          case "storage/unauthorized":
            console.log("无权限访问存储对象")
            break
          case "storage/canceled":
            console.log("上传已取消")
            break
          case "storage/unknown":
            console.log("未知错误，请检查服务端响应")
            break
        }
      },
      () => {
        getDownloadURL(uploadTask.snapshot.ref)
          .then((downloadURL) => {
            console.log("文件下载地址：", downloadURL)
            resolve(downloadURL)
          })
          .catch(reject)
      }
    )
  })
}

2. 修正组件调用逻辑（获取静态SVG并上传）

useEffect(() => {
  const uploadStaticSVG = async () => {
    try {
      // React项目中public目录下的文件直接用根路径访问
      const response = await fetch('/avatar.svg')
      if (!response.ok) throw new Error("获取SVG文件失败")
      
      // 将响应转换为Blob对象
      const blob = await response.blob()
      // 可选：转换为File对象（Blob也可直接上传）
      const file = new File([blob], 'avatar.svg', { type: 'image/svg+xml' })
      
      // 执行上传
      await uploadToFirebase(file)
    } catch (err) {
      console.error("上传失败：", err)
    }
  }

  uploadStaticSVG()
}, [])

注意事项 #

• 路径正确性：React项目中public目录的文件访问路径无需../public前缀，直接用/文件名即可，确保文件确实存在于public目录下，文件名大小写一致。
• 存储权限：开发阶段可暂时设置Firebase Storage规则为allow read, write: if true;（生产环境需修改为安全的权限规则）。
• 错误处理：添加了完整的异常捕获，方便排查文件获取或上传过程中的问题。

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