“AngularFireUploadTask”类型上不存在属性“downloadURL”答案

【问题标题】：Property 'downloadURL' does not exist on type 'AngularFireUploadTask'“AngularFireUploadTask”类型上不存在属性“downloadURL”
【发布时间】：2020-08-31 10:22:49
【问题描述】：

我的线路有问题

this.downloadURL = task.downloadURL()

即使我导入了 AngularFireUploadTask。

    import { Component, OnInit } from '@angular/core';
    import { AuthService } from '../../core/auth.service';
    import { AngularFireStorage, AngularFireStorageReference, AngularFireUploadTask } from 'angularfire2/storage';

    import { PostService } from '../post.service';
    import { Observable } from 'rxjs/Observable';



    @Component({
      selector: 'app-post-dashboard',
      templateUrl: './post-dashboard.component.html',
      styleUrls: ['./post-dashboard.component.css']
    })
    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}`
        if (file.type.split('/')[0] !== 'image') {
          return alert('only image files')
        } else {
          const task = this.storage.upload(path, file)

          this.downloadURL = task.downloadURL()

          this.uploadPercent = task.percentageChanges()
          console.log('Image Uploaded!')
          this.downloadURL.subscribe(url => this.image = url)
        }
      }

消息是：“类型上不存在属性‘downloadURL’ 'AngularFireUploadTask'。”。

我应该怎么做才能没有这个问题。

【问题讨论】：

标签： typescript angularfire

【解决方案1】：

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();

您需要从this video 更改的代码。

更新 - 8/30/20

对于那些想要更简洁代码的人，请使用 Promise（在异步函数中等待）：

const task = this.storage.upload(path, file);
const ref = this.storage.ref(path);
this.uploadPercent = task.percentageChanges();

// upload image, save url
await task;
console.log('Image uploaded!');
this.image = await ref.getDownloadURL().toPromise();

【讨论】：

谢谢你现在没有问题了。

【解决方案2】：

你要调用的方法是

getDownloadURL();

请查看此页面。

https://github.com/angular/angularfire2/blob/master/docs/storage/storage.md

这里可以看到方法的签名是

getDownloadURL(): Observable<any>

【讨论】：

PS：请注意，您的代码质量相当差，只要您几乎省略了命令行末尾的每个分号。你应该很快习惯这条重要的规则，用; 完成每个命令，这样才能被认为是一个成熟的开发人员。
在 JS 中实际上不需要使用分号来结束一行。如果删除所有代码，您会发现所有代码都将正常执行。许多人认为它是有效的语法，尽管大多数人仍然使用它来实现约定和可读性

【解决方案3】：

我在使用 angular + firebase 上传图片时遇到了这个错误，DownloadURL() 方法不再依赖于任务，所以我将在下面发布我是如何解决这个错误的

upload(event) {
const id = Math.random().toString(36).substring(2);
this.ref = this.afStorage.ref(id);
this.task = this.ref.put(event.target.files[0]);

this.task.snapshotChanges().pipe(
  finalize(() => this.downloadURL = this.ref.getDownloadURL() ))
.subscribe();

如果你想要任何图片源url，你可以这样得到，

 this.task.snapshotChanges().pipe(
 finalize(() => {
  this.ref.getDownloadURL().subscribe(url => {
    console.log(url); // <-- do what ever you want with the url..
  });
}))
.subscribe();

【讨论】：