AngularFireUploadTask无downloadURL属性报错，求解决方案

Hey there, this is a super common issue with newer versions of AngularFire Storage—let's break down why it's happening and how to fix it.

The Root Cause #

Starting with AngularFire 5.x and later, the AngularFireUploadTask class no longer has a downloadURL() method. The API was updated to separate upload task logic from download URL retrieval, since the download URL is tied to the storage reference, not the upload process itself.

The Solution #

You'll need to adjust your code to fetch the download URL from the storage reference instead of the upload task, using RxJS operators to ensure we only get the URL once the upload is complete. Here's how to modify your code:

First, add the finalize operator import to your RxJS imports (we'll use this to run code after the upload finishes):

import { finalize } from 'rxjs/operators';
// Keep your existing imports as-is

Then update the uploadImage method:

uploadImage(event) {
  const file = event.target.files[0];
  const path = `posts/${file.name}`;
  
  if (file.type.split('/')[0] !== 'image') {
    return alert('Only image files are allowed!');
  } else {
    const storageRef = this.storage.ref(path);
    const task = this.storage.upload(path, file);

    // Track upload progress (this part stays mostly the same)
    this.uploadPercent = task.percentageChanges();

    // Fetch download URL once upload completes
    task.snapshotChanges().pipe(
      finalize(() => {
        // Get the URL from the storage reference
        this.downloadURL = storageRef.getDownloadURL();
        this.downloadURL.subscribe(url => this.image = url);
      })
    ).subscribe();

    console.log('Image upload started!');
  }
}

What Changed? #

• We created a storageRef variable using this.storage.ref(path)—this points directly to the file we're uploading in Firebase Storage.
• Instead of calling task.downloadURL(), we use finalize() to trigger the URL fetch after the upload finishes, which prevents trying to access the URL before the file is fully uploaded.
• storageRef.getDownloadURL() returns an Observable<string>, which matches your existing downloadURL variable type perfectly.

Alternative Simpler Approach #

If you don't need to track upload progress and just want the URL once the upload is done, you can use the promise-based version of the task:

uploadImage(event) {
  const file = event.target.files[0];
  const path = `posts/${file.name}`;
  
  if (file.type.split('/')[0] !== 'image') {
    return alert('Only image files are allowed!');
  } else {
    const storageRef = this.storage.ref(path);
    const task = this.storage.upload(path, file);

    task.then(() => {
      storageRef.getDownloadURL().subscribe(url => {
        this.image = url;
        console.log('Image uploaded successfully!');
      });
    });
  }
}

Either approach will resolve the error you're seeing. Just double-check your RxJS imports if you go with the first method.

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