类型"AngularFireUploadTask"上不存在属性"downloadURL" [英] Property 'downloadURL' does not exist on type 'AngularFireUploadTask'

问题描述

我的电话线有问题

this.downloadURL = task.downloadURL()

this.downloadURL = task.downloadURL()

使用AngularFireUploadTask，即使我将其导入.

with AngularFireUploadTask even though I imported it.

    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".".

The message is:"Property 'downloadURL' does not exist on type 'AngularFireUploadTask'.".

该怎么办才能没有这个问题.

What should I do to not have this problem.

推荐答案

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

此视频所需的实际代码更改.

The actual change in code you will need from this video.

更新-8/30/20

对于那些需要更简洁代码的人，请使用promises(在异步函数中等待):

For those of you that want cleaner code, use promises (await in an async function):

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

这篇关于类型"AngularFireUploadTask"上不存在属性"downloadURL"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！