Firebase Storage初始化方式及JS文件上传读取问题咨询

一、两种初始化方式说明 #

1. Gcloud（服务端Node.js）方式 #

该方式仅适用于Node.js后端服务，对应的npm包为@google-cloud/storage，安装命令：

npm install @google-cloud/storage

注意：此方式依赖服务账号密钥文件（service-account-credentials.json），需妥善保管，绝对不能暴露在前端代码中。

2. Firebase Web SDK 初始化方式 #

这是前端Web应用的标准初始化方式，完全正确。先安装Firebase Web SDK：

npm install firebase

随后将Firebase控制台获取的完整配置信息填入firebaseConfig：

const firebaseConfig = {
    apiKey: "你的apiKey",
    authDomain: "你的authDomain",
    projectId: "你的projectId",
    storageBucket: "你的storageBucket",
    messagingSenderId: "你的messagingSenderId",
    appId: "你的appId"
};

firebase.initializeApp(firebaseConfig);

配置信息可在Firebase控制台 → 项目设置 → "SDK设置和配置" → "配置"标签页获取。

二、文件上传与读取实现（前端Web） #

1. 文件上传示例 #

先添加文件选择的HTML元素：

<input type="file" id="fileInput">
<button onclick="uploadFile()">上传文件</button>

对应的JavaScript上传逻辑：

function uploadFile() {
    const fileInput = document.getElementById('fileInput');
    const file = fileInput.files[0];
    if (!file) return;

    // 自定义文件存储路径，比如`audio/${file.name}`
    const storageRef = firebase.storage().ref(`uploads/${file.name}`);
    const uploadTask = storageRef.put(file);

    // 监听上传状态
    uploadTask.on('state_changed', 
        (snapshot) => {
            // 实时显示上传进度
            const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
            console.log(`上传进度：${progress}%`);
        },
        (error) => {
            console.error('上传失败：', error);
        },
        () => {
            // 上传完成后获取文件下载地址
            uploadTask.snapshot.ref.getDownloadURL().then((downloadURL) => {
                console.log('文件下载链接：', downloadURL);
                // 可将该链接存入数据库或用于页面展示
            });
        }
    );
}

2. 文件读取（获取下载链接） #

若已知文件存储路径，可直接获取下载链接：

// 示例文件路径：`uploads/test.jpg`
const storageRef = firebase.storage().ref('uploads/test.jpg');
storageRef.getDownloadURL().then((downloadURL) => {
    // 将链接用于图片展示或音频播放
    document.getElementById('previewMedia').src = downloadURL;
}).catch((error) => {
    console.error('获取下载链接失败：', error);
});

注意：Storage安全规则 #

默认规则仅允许认证用户读写文件，若需调整权限，可在Firebase控制台 → Storage → 规则页修改，例如：

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /uploads/{allPaths=**} {
      allow read: if true; // 允许所有人读取
      allow write: if request.auth != null; // 仅认证用户可上传
    }
  }
}

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