React中用swr-firestore的fuego上传图片至Firebase Storage并获取URL的方法

核心逻辑 #

swr-firestore 核心聚焦 Firestore 数据的 SWR 封装，未内置 Storage 操作接口，但fuego实例本身持有初始化时传入的 Firebase 应用实例，可直接复用该实例操作 Storage，无需重复初始化 Firebase 配置。

具体实现步骤 #

• 从已初始化的fuego实例中获取 Firebase 应用并初始化 Storage

import { fuego } from "@nandorojo/swr-firestore";
import { getStorage } from "firebase/storage";

// 直接复用fuego持有的firebase app实例初始化storage
const storage = getStorage(fuego.app);

• 封装图片上传方法，上传完成后可同步将下载链接写入 Firestore 对应业务文档

import { ref, uploadBytes, getDownloadURL } from "firebase/storage";

/**
 * 上传图片到Firebase Storage
 * @param {File} file 上传的图片文件对象
 * @param {string} storagePath 存储在Storage中的路径
 * @param {string} docId 需要关联更新的Firestore文档ID
 * @param {string} updateField 需要写入Firestore的字段名
 * @returns {string} 图片公开访问链接
 */
const uploadImage = async (file, storagePath, docId, updateField) => {
  const storageRef = ref(storage, storagePath);
  // 执行上传
  const uploadResult = await uploadBytes(storageRef, file);
  // 获取下载链接
  const downloadUrl = await getDownloadURL(uploadResult.ref);
  // 同步更新到Firestore，复用fuego的db实例
  await fuego.db.collection("你的业务集合名").doc(docId).update({
    [updateField]: downloadUrl
  });
  return downloadUrl;
}

可选扩展：封装SWR钩子缓存Storage文件链接 #

如果需要对Storage文件的访问链接做缓存、重试、自动刷新等SWR能力，可以自定义封装钩子：

import useSWR from "swr";
import { ref, getDownloadURL } from "firebase/storage";

const useStorageUrl = (storagePath) => {
  return useSWR(
    storagePath,
    async (path) => {
      const fileRef = ref(storage, path);
      return getDownloadURL(fileRef);
    },
    // 可配置缓存时间、重试逻辑等SWR参数
    { revalidateOnFocus: false }
  )
}

// 组件内使用示例
const GoodsImage = ({ storagePath }) => {
  const { data: imageUrl, error } = useStorageUrl(storagePath);
  if (error) return <div>图片加载失败</div>;
  if (!imageUrl) return <div>加载中...</div>;
  return <img src={imageUrl} alt="商品图" />;
}

版本适配说明 #

如果你使用的是 Firebase Web SDK v8 版本，Storage 初始化语法调整为const storage = fuego.app.storage()即可，其余业务逻辑完全一致。

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