Question

我正在使用Angularfire2进行上传和播放下载图像。但在移除getDownloadURL()后，我被困在这里。

import { finalize } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  template: `
    <input type="file" (change)="uploadFile($event)" />
    <div>{{ uploadPercent | async }}</div>
    <a [href]="downloadURL | async">{{ downloadURL | async }}</a>
 `
})
export class AppComponent {
  uploadPercent: Observable<number>;
  downloadURL: Observable<string>;
  constructor(private storage: AngularFireStorage) {}
  uploadFile(event) {
    const file = event.target.files[0];
    const filePath = 'name-your-file-path-here';
    const fileRef = this.storage.ref(filePath);
    const task = this.storage.upload(filePath, file);

    // observe percentage changes
    this.uploadPercent = task.percentageChanges();
    // get notified when the download URL is available
    task.snapshotChanges().pipe(
        finalize(() => this.downloadURL = fileRef.getDownloadURL() )
     )
    .subscribe()
  }
}

我在HTML页面中获得了downloadURL，但是如何进入该功能？

Answer 1

您必须订阅this.downloadURL Observable才能获取url字符串。 HTML中的“异步”管道基本上做同样的事情。订阅并在发出值后立即更新值。

但是你必须确保this.downloadRef不是null。所以在你的代码示例中，它必须进入finalize函数。

 task.snapshotChanges().pipe(
    finalize(() => {
       this.downloadURL = fileRef.getDownloadURL();
       this.downloadURL.subscribe(url => console.log(url) );
    })
 )

但我不确定，如果最终确定是正确的功能。此代码仅在snapshotChanges Observable完成或第一次发射后出错时才有效。但是我需要更多关于背景的信息以获得更详细的答案。

在.ts代码中获取Observable值

1 个答案: