AngularFireUploadTask无downloadURL属性问题求助

Hey John, I’ve dealt with this exact frustration before when following older AngularFire tutorials—totally get where you’re coming from! The issue here is that the tutorial you’re using relies on an older version of AngularFire (angularfire2) where AngularFireUploadTask had a built-in downloadURL() method. In newer versions (especially after angularfire2 was rebranded to @angular/fire), this API changed.

Here’s how to update your code to get the download URL correctly: #

First, let’s adjust your startUpload method. You’ll need to use the StorageReference object (from storage.ref()) to fetch the download URL once the upload completes:

import { Component, OnInit } from '@angular/core';
import { AngularFireStorage, AngularFireUploadTask } from '@angular/fire/storage'; // Note: For latest @angular/fire, this is the correct import
import { AngularFirestore} from '@angular/fire/firestore';
import { Observable } from 'rxjs';
import { finalize } from 'rxjs/operators'; // Don't forget to import finalize!

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

    // Optional: Add file type validation here
    if (!file || file.type.split('/')[0] !== 'image') {
      console.error('Only image files are allowed!');
      return;
    }

    // The storage path
    const path = `test/${new Date().getTime()}_${file.name}`;
    const customMetadata = { app: 'My AngularFire File Uploader' };

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

    // Get a reference to the file in storage
    const fileRef = this.storage.ref(path);

    // Listen for upload completion, then fetch the download URL
    this.task.snapshotChanges().pipe(
      finalize(() => {
        // This line gets the download URL as an Observable
        this.downloadURL = fileRef.getDownloadURL();
      })
    ).subscribe();
  }

  ngOnInit() { }
}

Key Changes Explained: #

• We import finalize from rxjs/operators to run code after the upload completes.
• We create a fileRef using storage.ref(path)—this is the new way to access file metadata and download URLs.
• Instead of calling this.task.downloadURL(), we use fileRef.getDownloadURL() inside the finalize block, which returns an Observable<string> matching your existing downloadURL property type.

Bonus: Save the URL to Firestore #

If you want to store the download URL in your Firestore database (like the tutorial probably covers), you can expand the finalize block:

finalize(async () => {
  this.downloadURL = fileRef.getDownloadURL();
  // Convert Observable to a promise to get the actual string value
  const url = await this.downloadURL.toPromise();
  // Save to Firestore
  this.db.collection('uploaded-files').add({
    url,
    path,
    uploadTime: new Date()
  });
})

Just make sure you’re using a compatible version of @angular/fire and firebase in your package.json—if you’re still on the old angularfire2 package, consider upgrading to @angular/fire for long-term support.

内容的提问来源于stack exchange，提问作者John