物业' downloadURL'在类型' AngularFireUploadTask'中不存在

时间:2018-05-26 10:35:59

标签: typescript angularfire

我的线路有问题

  

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)
        }
      }
  

消息是:&#34;属性&#39; downloadURL&#39;在类型上不存在   &#39; AngularFireUploadTask&#39;&#34;

我该怎么做才能解决这个问题。

3 个答案:

答案 0 :(得分:8)

  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所需的代码实际更改。

答案 1 :(得分:1)

您要调用的方法是

getDownloadURL();

请查看此页面。

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

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

getDownloadURL(): Observable<any>

答案 2 :(得分:0)

我在使用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();

如果您希望图像源网址为任何内容,则可以这样获得

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