Angular Firebase 存儲：等待照片上傳返回downloadURL

Question

我已經嘗試了一切，我覺得我快要失去理智了。 我正在使用 putString 將簽名照片作為 base64 上傳到 Firebase 存儲，並且我得到了 downloadURL 作為回報。 問題是有時它會返回空白字符串，因為上傳尚未完成，並且該方法繼續進行。 因此，當我嘗試通過按鈕調用此方法時，我必須單擊它 2 次或等待幾秒鍾。

async saveCanvas() {
const loading = await this.loadingController.create();
await loading.present();
var signature = this.signaturePad.toDataURL().slice(22);
this.signaturePhotoName = new Date().toJSON();
const fileStoragePath = `signatures/${this.signaturePhotoName}`;
const imageFireStorageReference = this.angularFireStorage.ref(fileStoragePath);
this.fireUploadTask = this.angularFireStorage.ref(fileStoragePath).putString(signature, 'base64', { contentType: 'image/png'});
this.fireUploadTask.snapshotChanges().pipe(
  finalize(() => {
    const downloadURL = imageFireStorageReference.getDownloadURL();
    downloadURL.subscribe(async url => {
      if(url) {
        this.uploadedSignaturePhotoPath = url;
        this.report.signature = this.uploadedSignaturePhotoPath;
        this.reportForm.get('_signature').setValue(this.uploadedSignaturePhotoPath);
        await loading.dismiss();
      }
    })
  })
).subscribe();}

async onSubmit() {
    if(!this.isCanvasBlank()) {
      this.saveCanvas().then(() => {
        if(this.report.signature != '') {
          if(this.reportForm.valid) {
            this.reportsService.postReport(this.report).subscribe(response => {
              console.log(response);
            })}
          else {
            console.log("need more info");
          }
        }
      });
    } else {
      alert("no signature!");
    }
  }

Answer 1

等待上傳完成putString ，然后 go 查詢下載 url getDownloadURL() 。

this.fireUploadTask = await this.angularFireStorage.ref(fileStoragePath)
     .putString(signature, 'base64', { contentType: 'image/png'});