AngularFire Storage - 使用 Firebase 在多个存储桶之间动态切换

Question

我目前正在使用 AngularFire 将我的图像上传到 firebase 存储，然后使用 firebase image resize extension 调整大小。这适用于我的 200x200 个人资料图片。

我现在想上传一些其他图片并调整其大小，尺寸为 500x500。

我制作了另一个存储桶和 installed/configured 另一个 firebase 扩展实例，以将上传到新存储桶的任何内容调整为 500x500。

我不知道如何在我的应用程序中的存储桶之间切换，以便我可以将个人资料图像上传到一个存储桶，将其他图像上传到另一个存储桶。

有没有人能用 AngularFire 做到这一点？

注意： -我知道你可以使用 firebase JS SDK（原始 firebase）来做到这一点，但我想尽可能使用 AngularFire 来避免更改我的代码。

-我也知道您可以使用一个调整大小扩展实例指定多个调整大小分辨率，但这会产生大量不必要的图像，因为它会为每次上传创建 200x200 和 500x500。

Answer 1

据我所知，使用 AngularFire 不可能完全做到这一点。我最终重构了我的代码，以便为这个特定部分使用原始 Firebase。它非常相似，但调用和对象与我在 AngularFire 中使用的不同。

constructor(private afStorage: AngularFireStorage) {
   this.defaultBucket = this.afStorage.storage.app.storage();
   this.otherBucket = this.afStorage.storage.app.storage(OTHER_BUCKETNAME);
}

const storageRef = this.otherBucket.ref().child(FILENAME);
   storageRef.put(file).then((snapshot) => {
   console.log('Uploaded a blob or file!', snapshot);
}

Answer 2

您可以简单地为不同的组件或模块提供不同的存储桶。唯一的警告是你必须按桶分解你的组件。或者您可以使用原始的 Firebase sdk。

@Component({
  selector: 'grapez-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  providers: [{ provide: BUCKET, useValue: 'ai-json-annotations-bucket' }],
})
export class AppComponent implements OnInit {
  constructor(private storage: AngularFireStorage) {
    // todo: get ai annotation result json files from one bucket and pass them to child component
  }
}

@Component({
  selector: 'grapez-gif-segments-child-viewer',
  templateUrl: './gif-segments-child-viewer.component.html',
  styleUrls: ['./gif-segments-child-viewer.component.scss'],
  providers: [
    { provide: BUCKET, useValue: 'ai-gif-segments-bucket' }, // this will override the previously defined BUCKET definition for this component and any of its children
  ],
})
export class GifSegmentsViewerComponent implements OnInit {
  @Input() annotations$: Observable<ListResult>;

  constructor(private storage: AngularFireStorage) {
    // todo: take ai annotation result json files and lookup corresponding gif segment files in another bucket
  }
}

AngularFire Storage - 使用 Firebase 在多个存储桶之间动态切换

AngularFire Storage - Dynamically switch between multiple buckets with Firebase

firebase

firebase-storage

angularfire2