如何将Base64图片上传至Firebase并获取其访问令牌？

1. 预处理Base64字符串 #

首先剥离Base64字符串开头的data:image/png;base64,前缀，只保留纯Base64数据部分：

const base64Data = base64String.replace(/^data:image\/png;base64,/, '');

2. 转换为上传兼容格式 #

前端（React）：转成Blob #

const byteCharacters = atob(base64Data);
const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
  byteNumbers[i] = byteCharacters.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
const blob = new Blob([byteArray], { type: 'image/png' });

后端（Node.js）：转成Buffer #

const buffer = Buffer.from(base64Data, 'base64');

3. 上传至Firebase Storage #

使用uploadBytes方法完成上传，前后端逻辑一致：

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

const storage = getStorage();
const imageRef = ref(storage, `/issueImages/${firebaseImageId}`);

// 前端传blob，后端传buffer
const uploadResult = await uploadBytes(imageRef, blob /* 或buffer */, {
  contentType: 'image/png'
});

4. 获取访问凭证（下载URL/签名URL） #

注意：Firebase Storage的访问凭证不会存放在文件元数据中，需单独调用API获取：

获取公开下载URL（适用于已设公开访问规则的文件） #

import { getDownloadURL } from "firebase/storage";

const downloadURL = await getDownloadURL(imageRef);
console.log("文件访问URL:", downloadURL);

获取临时签名URL（适用于私有文件，可设置有效期） #

后端Node.js环境下生成带有效期的私有访问令牌：

import admin from "firebase-admin";

const bucket = admin.storage().bucket();
const file = bucket.file(`issueImages/${firebaseImageId}`);

// 生成1小时有效期的签名URL
const [signedUrl] = await file.getSignedUrl({
  action: 'read',
  expires: new Date(Date.now() + 3600000)
});
console.log("临时访问令牌:", signedUrl);

重要提示 #

• 若之前在元数据中找访问令牌是误区，元数据仅包含文件大小、类型等基础信息，访问凭证需通过getDownloadURL或getSignedUrl单独获取。
• 确保Storage安全规则允许上传和读取操作，测试阶段可临时使用宽松规则（生产环境需严格配置）：

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if true;
    }
  }
}

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