上传任务快照问题答案

【问题标题】：Trouble with Upload Task Snapshot上传任务快照问题
【发布时间】：2018-11-11 19:26:59
【问题描述】：

我在项目中显示图像时遇到问题。我希望在 .subscribe 任务中下载 url 与图像相同。所以它可以显示它。但是当我这样做时，它会显示一条错误消息：

类型“UploadTaskSnapshot”不可分配给类型“字符串”。

代码如下：

export class PostDashboardComponent implements OnInit {

  title: string;
  image: string = null;
  content: string;

  buttonText: string = "Create Post";

  uploadPercent: Observable<number>;
  downloadURL: Observable<string>;


  constructor(
    private auth: AuthService,
    private postService: PostService, 
    private storage: AngularFireStorage
  ) { }

  ngOnInit() {
  }
  uploadImage(event) {
    const file = event.target.files[0]
    const path = `posts/${file.name}`
    const fileRef = this.storage.ref(path);
    if (file.type.split('/')[0] !== 'image') {
      return alert('only image files')
    } else {
      const task = this.storage.upload(path, file)
      this.uploadPercent = task.percentageChanges();
      task.snapshotChanges().pipe(
         finalize(() => this.downloadURL = fileRef.getDownloadURL() )
      )

.subscribe(url => (this.image = url))

      console.log('Image Uploaded!');

由于我是业余爱好者，我应该进行哪些更改才能使其正常工作。感谢您的帮助。

【问题讨论】：

标签： angularjs typescript firebase firebase-storage

【解决方案1】：

我找到了答案，是这样的：

  uploadImage(event) {
  const file = event.target.files[0]
  const path = `posts/${file.name}`
  const fileRef = this.storage.ref(path);
  if (file.type.split('/')[0] !== 'image') {
  return alert('only image files')
} else {
  const task = this.storage.upload(path, file);
  const ref = this.storage.ref(path);
  this.uploadPercent = task.percentageChanges();
  console.log('Image uploaded!');
  task.snapshotChanges().pipe(
    finalize(() => {
      this.downloadURL = ref.getDownloadURL()
      this.downloadURL.subscribe(url => (this.image = url));
    })
  )
  .subscribe();

【讨论】：