时间戳

首页 > 解决方案 > Angularfire2 错误“‘AngularFireUploadTask’类型上不存在属性‘downloadURL’。”

javascript - Angularfire2 错误“‘AngularFireUploadTask’类型上不存在属性‘downloadURL’。”

问题描述

我正在尝试在我的 Angular Firebase/Firestore 应用程序中构建上传功能。我正在使用本教程：

https://angularfirebase.com/lessons/firebase-storage-with-angularfire-dropzone-file-uploader/

并从 Atom 的 linter 中获取此错误消息：

Property 'downloadURL' does not exist on type 'AngularFireUploadTask'.

我的相关部分file-upload.component.ts如下。请参阅标有 ​​的代码ERROR HERE。 

import { Component, OnInit } from '@angular/core';
import { AngularFireStorage, AngularFireUploadTask } from 'angularfire2/storage';
import { AngularFirestore} from 'angularfire2/firestore';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'app-file-upload',
  templateUrl: './file-upload.component.html',
  styleUrls: ['./file-upload.component.css']
})

export class FileUploadComponent implements OnInit {

  // Main Task
  task: AngularFireUploadTask;


  // download URL
  downloadURL: Observable<string>;

  // state for dropzone CSS toggling
  isHovering: boolean;

  constructor(private storage: AngularFireStorage, private db: AngularFirestore) { }

  startUpload(event: FileList) {
    //the file object
    const file = event.item(0)

    ...

    // the storage path
    const path = `test/${new Date().getTime()}_${file.name}`;

    // The main task
    this.task = this.storage.upload(path, file, {customMetadata})

    // ERROR HERE 
    this.downloadURL = this.task.downloadURL();
  }

  ngOnInit() {
  }

}

标签： javascriptangulartypescriptfirebaseangularfire2

解决方案

从 Firebase 5.0 开始，上传任务中不再有 downloadUrl。我们已经在 AngularFire 中反映了这种变化。您必须从 ref 获取 url。

import { storage } from 'firebase/storage';

...

const ref = this.storage.ref(path);
this.task = ref.put(file, {customMetadata})

this.downloadURL = this.task.snapshotChanges().pipe(
  filter(snap => snap.state === storage.TaskState.SUCCESS)
  switchMap(() => ref.getDownloadURL())
)

推荐阅读