在Angular中使用Firebase Storage时如何处理两个存储桶？

Great question! Working with multiple Firebase Storage buckets in Angular is totally doable—here's a step-by-step approach to set it up and handle file uploads to each bucket:

1. Configure Both Firebase Apps in Your Environment #

First, make sure both of your Firebase configurations are properly defined in your environment.ts file. Double-check that the storageBucket field for each config points to the correct bucket (fill in the missing parts of your firebaseExcelConfig):

export const environment = {
  production: false,
  firebaseConfig: { 
    apiKey: 'AIzaSyBHsAxVgiuM0_xLd3BunTG6Yf9x1nynxoA', 
    authDomain: 'careerograph-e9963.firebaseapp.com', 
    databaseURL: 'https://careerograph-e9963.firebaseio.com', 
    projectId: 'careerograph-e9963', 
    storageBucket: 'careerograph-e9963.appspot.com', 
    messagingSenderId: '669874223858' 
  },
  firebaseExcelConfig: { 
    apiKey: 'AIzaSyBHsAxVgiuM0_xLd3BunTG6Yf9x1nynxoA', 
    authDomain: 'careerograph-e9963.firebaseapp.com',
    databaseURL: 'https://careerograph-e9963.firebaseio.com',
    projectId: 'careerograph-e9963',
    storageBucket: 'YOUR_EXCEL_BUCKET_NAME.appspot.com', // Replace with your actual Excel bucket name
    messagingSenderId: '669874223858'
  }
};

2. Initialize Both Firebase App Instances #

In your app.module.ts, initialize the default Firebase app (for your main bucket) and a named secondary app for your Excel bucket. The named app lets AngularFire distinguish between the two instances:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireStorageModule } from '@angular/fire/compat/storage';
import { environment } from '../environments/environment';

@NgModule({
  imports: [
    BrowserModule,
    // Initialize default app (main storage bucket)
    AngularFireModule.initializeApp(environment.firebaseConfig),
    // Initialize named secondary app (Excel storage bucket)
    AngularFireModule.initializeApp(environment.firebaseExcelConfig, 'excelStorageApp'),
    AngularFireStorageModule // Required for Storage functionality
  ],
  declarations: [/* Your components */],
  bootstrap: [/* Your root component */]
})
export class AppModule { }

3. Create a Service to Manage Both Buckets #

To keep your code clean, create a dedicated service that handles uploads (and other operations) for both buckets. This service will inject the main Firebase app and retrieve the secondary app instance to create separate AngularFireStorage objects:

import { Injectable } from '@angular/core';
import { AngularFireStorage, AngularFireUploadTask } from '@angular/fire/compat/storage';
import { FirebaseApp } from '@angular/fire/compat';

@Injectable({
  providedIn: 'root'
})
export class MultiBucketStorageService {
  private mainStorage: AngularFireStorage;
  private excelStorage: AngularFireStorage;

  constructor(private firebaseApp: FirebaseApp) {
    // Initialize main storage from default app
    this.mainStorage = new AngularFireStorage(firebaseApp);
    
    // Find the named secondary app and initialize its storage
    const excelApp = this.firebaseApp.apps.find(app => app.name === 'excelStorageApp');
    this.excelStorage = new AngularFireStorage(excelApp);
  }

  // Upload file to main bucket
  uploadToMainBucket(file: File, filePath: string): AngularFireUploadTask {
    return this.mainStorage.ref(filePath).put(file);
  }

  // Upload file to Excel bucket
  uploadToExcelBucket(file: File, filePath: string): AngularFireUploadTask {
    return this.excelStorage.ref(filePath).put(file);
  }

  // Get download URL from main bucket
  getMainBucketDownloadUrl(filePath: string) {
    return this.mainStorage.ref(filePath).getDownloadURL();
  }

  // Get download URL from Excel bucket
  getExcelBucketDownloadUrl(filePath: string) {
    return this.excelStorage.ref(filePath).getDownloadURL();
  }
}

4. Use the Service in Your Component #

Now you can easily call the service methods in any component to upload files to either bucket. Here's a simple example:

import { Component } from '@angular/core';
import { MultiBucketStorageService } from './multi-bucket-storage.service';

@Component({
  selector: 'app-file-upload',
  template: `
    <input type="file" (change)="onFileSelected($event)">
    <div class="upload-buttons">
      <button (click)="uploadToMain()" [disabled]="!selectedFile">Upload to Main Bucket</button>
      <button (click)="uploadToExcel()" [disabled]="!selectedFile">Upload to Excel Bucket</button>
    </div>
  `,
  styles: [`
    .upload-buttons { margin-top: 1rem; }
    button { margin-right: 1rem; padding: 0.5rem 1rem; }
  `]
})
export class FileUploadComponent {
  selectedFile: File;

  constructor(private storageService: MultiBucketStorageService) {}

  onFileSelected(event: Event) {
    const input = event.target as HTMLInputElement;
    if (input.files?.length) {
      this.selectedFile = input.files[0];
    }
  }

  uploadToMain() {
    if (!this.selectedFile) return;
    
    const uploadTask = this.storageService.uploadToMainBucket(
      this.selectedFile,
      `main-uploads/${Date.now()}-${this.selectedFile.name}`
    );

    uploadTask.then(snapshot => {
      console.log('File uploaded to main bucket!');
      this.storageService.getMainBucketDownloadUrl(snapshot.ref.fullPath).subscribe(url => {
        console.log('Main bucket download URL:', url);
      });
    }).catch(error => {
      console.error('Main bucket upload error:', error);
    });
  }

  uploadToExcel() {
    if (!this.selectedFile) return;
    
    const uploadTask = this.storageService.uploadToExcelBucket(
      this.selectedFile,
      `excel-uploads/${Date.now()}-${this.selectedFile.name}`
    );

    uploadTask.then(snapshot => {
      console.log('File uploaded to Excel bucket!');
      this.storageService.getExcelBucketDownloadUrl(snapshot.ref.fullPath).subscribe(url => {
        console.log('Excel bucket download URL:', url);
      });
    }).catch(error => {
      console.error('Excel bucket upload error:', error);
    });
  }
}

Important Notes #

• Bucket Permissions: Make sure both storage buckets have proper security rules configured in the Firebase Console to allow uploads/downloads (e.g., restrict access to authenticated users or specific paths).
• Version Compatibility: Ensure your @angular/fire and firebase npm packages are on compatible versions to avoid initialization issues.
• Cleanup: If you no longer need the secondary app instance, you can call delete() on it, but keeping it initialized for the app's lifecycle is typically fine.

内容的提问来源于stack exchange，提问作者Mohamed Abo Elmagd