多Firebase项目管理：通过Callable函数+Firebase Admin上传文件至Storage

对于1GB以上的大文件，绝对不能通过HTTPS Callable函数直接传输文件内容——Callable函数有10MB的请求大小上限，Base64、Blob、流都绕不开这个限制。最优方案是：用Callable函数完成权限校验后，返回目标Storage的临时上传签名URL，前端直接通过这个URL将文件上传到目标Bucket，全程文件不经过Cloud Function，既保证权限控制，又支持大文件上传。

方案优势 #

• 规避Callable的10MB大小限制，支持任意大小文件上传
• 减少Cloud Function的资源消耗（无需处理文件流）
• 上传速度更快（前端直接对接Storage）
• 保留完整的权限校验逻辑

后端Cloud Function代码（修正版） #

import * as functions from "firebase-functions";
import * as admin from "firebase-admin";

// 避免重复初始化App实例
const getOrInitializeApp = (appId: string, env: string) => {
  const appName = `${appId}-${env}`;
  try {
    return admin.app(appName);
  } catch (error) {
    return admin.initializeApp({
      credential: admin.credential.cert(serviceAccount),
      databaseURL: DBURLS[appName],
      storageBucket: STORAGEURLS[appName],
    }, appName);
  }
};

export const getUploadUrl = functions.https.onCall(async (data, context) => {
  // 权限校验
  if (!context.auth) {
    throw new functions.https.HttpsError("unauthenticated", "未登录");
  }
  if (context.auth.uid !== adminId) {
    throw new functions.https.HttpsError("permission-denied", "无操作权限");
  }

  const { appId, env, fileName, contentType } = data;
  
  // 获取目标App和Bucket
  const app = getOrInitializeApp(appId, env);
  const bucket = getStorage(app).bucket();
  
  // 生成临时上传URL（过期时间15分钟）
  const file = bucket.file(fileName);
  const [url] = await file.getSignedUrl({
    action: "write",
    expires: Date.now() + 15 * 60 * 1000, // 15分钟后过期
    contentType: contentType, // 必须和前端上传的Content-Type一致
  });

  return { uploadUrl: url };
});

前端Ionic/React + React-Dropzone代码示例 #

import { useDropzone } from "react-dropzone";
import { getFunctions, httpsCallable } from "firebase/functions";

const FileUploader = () => {
  const { getRootProps, getInputProps, acceptedFiles } = useDropzone({
    accept: {
      "image/*": [],
      "video/*": []
    },
    maxFiles: 1
  });

  const handleUpload = async (file: File) => {
    const functions = getFunctions();
    const getUploadUrl = httpsCallable(functions, "getUploadUrl");

    try {
      // 1. 调用Callable函数获取临时上传URL
      const result = await getUploadUrl({
        appId: "你的目标项目ID",
        env: "prod", // 或dev等环境标识
        fileName: file.name,
        contentType: file.type
      });
      const uploadUrl = result.data.uploadUrl;

      // 2. 直接通过PUT请求上传文件到Storage
      const response = await fetch(uploadUrl, {
        method: "PUT",
        body: file,
        headers: {
          "Content-Type": file.type
        }
      });

      if (response.ok) {
        console.log("文件上传成功");
        // 可以在这里添加后续逻辑，比如记录文件路径到数据库
      } else {
        throw new Error("上传失败");
      }
    } catch (error) {
      console.error("上传出错:", error);
    }
  };

  return (
    <div {...getRootProps()}>
      <input {...getInputProps()} />
      <p>拖拽文件到此处，或点击选择文件</p>
      {acceptedFiles.map(file => (
        <div key={file.path} style={{ marginTop: "16px" }}>
          <p>{file.name} ({(file.size / 1024 / 1024).toFixed(2)}MB)</p>
          <button onClick={() => handleUpload(file)}>开始上传</button>
        </div>
      ))}
    </div>
  );
};

export default FileUploader;

关键注意事项 #

• 临时URL过期时间：根据业务需求调整，建议15-30分钟，避免URL被滥用
• Content-Type一致性：前端上传时的Content-Type必须和生成URL时指定的一致，否则会报错
• 大文件上传进度：可以通过fetch的ReadableStream或第三方库（如axios）实现上传进度监听
• 错误处理：捕获Callable函数的权限错误、URL过期错误、网络错误等，给用户友好提示
• App实例复用：必须检查并复用已初始化的App实例，否则多次调用函数会抛出“App already exists”错误

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