AngularFire2存储上传完成检测方法（Angular4迁移至Angular6）

我刚好在把项目从Angular 4迁移到Angular 6+AngularFire 2的时候遇到过一模一样的问题！新版本的AngularFire确实弃用了原来基于firebase.storage.TaskEvent.STATE_CHANGED的事件监听方式，转而采用更贴合Angular生态的RxJS Observable API。下面给你两种实用的检测上传完成的方案：

方案一：监听快照变化，判断完成状态 #

现在put()方法返回的是AngularFireUploadTask对象，它的snapshotChanges()方法会返回一个Observable，在上传的每个状态节点（开始、进度更新、暂停、完成、失败）都会发出上传快照。我们可以在订阅里判断快照的state是否为SUCCESS：

// 记得导入需要的依赖
import { AngularFireStorage } from '@angular/fire/storage';
import { finalize } from 'rxjs/operators';
import * as firebase from 'firebase/app';

// 初始化上传任务
const storageRef = this.angularFireStorage.ref('sitemap.xml');
const uploadTask = storageRef.put(sitemapBlob, metaData);

// 订阅快照变化
uploadTask.snapshotChanges().subscribe(
  snapshot => {
    // 检测上传是否成功完成
    if (snapshot.state === firebase.storage.TaskState.SUCCESS) {
      console.log('✅ 上传完成！');
      // 这里可以获取文件的下载URL
      storageRef.getDownloadURL().subscribe(downloadUrl => {
        console.log('文件下载URL:', downloadUrl);
        // 后续处理逻辑，比如保存URL到数据库
      });
    }
  },
  error => {
    console.error('❌ 上传失败:', error);
    // 处理上传错误
  }
);

方案二：使用finalize操作符（推荐） #

如果你只关心上传结束（不管成功还是失败），可以用RxJS的finalize操作符，它会在Observable完成或出错时执行回调，非常适合做上传后的清理或收尾工作：

uploadTask.snapshotChanges().pipe(
  finalize(() => {
    console.log('🔚 上传已结束（成功/失败）');
    // 这里同样可以获取下载URL（注意：如果上传失败，getDownloadURL会抛出错误）
    storageRef.getDownloadURL().subscribe(
      downloadUrl => {
        console.log('文件下载URL:', downloadUrl);
      },
      error => {
        console.error('获取下载URL失败:', error);
      }
    );
  })
).subscribe();

额外提示 #

• 如果你需要实时获取上传进度，可以用uploadTask.percentageChanges()，它会返回一个Observable，发出当前上传的百分比数值，非常适合做进度条展示。
• uploadTask.stateChanges()会按顺序发出每个状态的事件对象（比如running、paused、success），适合更精细的状态监听。

内容的提问来源于stack exchange，提问作者eat-sleep-code