AngularFireStorage 为每次上传返回未定义的 URL

Question

所以我已经在我的 Angular 6 webapp 中设置了 AngularFire，并且一直在尝试使用 AngularFireStorage。我已正确遵循文档并让它上传图像，正如我在 Firebase 中看到的那样，图像已上传到特定位置并使用我提供的特定文件路径。这是代码:

  uploadFile(e) {
    const file = e.target.files[0];
    const filePath = `test${this.uid}`;
    const task = this.storage.upload(filePath, file);
    const dlUrl = task.downloadURL();
    dlUrl.subscribe((res) => {
      console.log(res);
    });
  }

每当我调用console.log(res)它返回一个未定义的值。我从来没有收到过来自 AngularFireStorage 的实际下载 URL，只是总是返回 undefined .我可以验证正确的图像被上传到存储桶中，即使它具有相同的文件名，它也会覆盖旧的。这里尽可能清楚的是<input>对于文件:

<input type="file" accept=".jpg,.jpeg,.png;capture=camera" (change)="uploadFile($event)">

我不确定图片成功上传时会出现什么问题，我在控制台中得到零错误，但总是返回未定义的字符串。非常感谢任何和所有帮助，提前致谢!

编辑:对于仍在关注这篇文章的任何人，我最终只使用了 firebase方法和包并跳过angularfire2对于存储功能。这是我代替 angularfire2/storage 所做的方法。

我在服务中使用 BehaviorSubject<number> 创建了一个上传方法将百分比传递给我的组件:

  percentSubject: BehaviorSubject<number> = new BehaviorSubject(0);

  constructor() { }

  pushUpload(file) {
    return new Promise((resolve, reject) => {
      const storageRef = firebase.storage().ref();
      const uploadRef = storageRef.child(`uploads/${file.name}`);
      this.uploadTask = uploadRef.put(file);
      this.uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED,
        (snapshot: firebase.storage.UploadTaskSnapshot) => {
          this.percentSubject.next((snapshot.bytesTransferred / snapshot.totalBytes) * 100);
        },
        (error) => {
          reject(error);
        },
        async () => {
          const u = await this.uploadTask.snapshot.ref.getDownloadURL();
          resolve(u);
        }
      );
    });
  }

这每次都有效并返回正确的 downloadURL与 Promise.resolve .我仍然想知道是否有人可以让 AngularFireStorage 方法正常工作，因为我仍然对它返回未定义的 URL 的原因感到困惑。希望对您有所帮助!

编辑 2:

所以在做了一些研究并浏览了 angularfire2/storage 之后模块我注意到它正在使用从 5.0.0 版开始删除的已弃用的 firebase 方法。这是发行说明:https://firebase.google.com/support/release-notes/js

如果你进入 4.13.0，你会看到 FullMetadata.downloadUrls和 UploadTaskSnapshot.downloadUrl已弃用 Reference.getDownloadUrl() .翻看angularfire2包我注意到这一行:

downloadURL: function () { return from(task.then(function (s) { return s.downloadURL; })); }

在task.js文件并意识到它使用的是旧方法，因为我在我的应用程序中使用 firebase 版本 5.0.1，变量已被删除，因此每次都会返回未定义。如果 angularfire2/storage/task.js 中的那一行文件更改为:

downloadURL: function () { return from(task.then(async function (s) { return await s.ref.getDownloadURL(); })); }

它使用 Firebase 5+ 返回上传图片的正确 URL。

因此，如果您想将 AngularFire2 用于 Storage ATM，请确保您的 Firebase 版本与 AngularFire2 版本相关联。希望这可以解决其他人的问题!

Answer 1

Firebase 5.0 从上传任务中删除了 downloadURL()，我们在最近的 AngularFire 版本中反射(reflect)了这一变化。

我建议使用 rxjs 终结运算符 + 引用，如下所示:

 task.snapshotChanges().pipe(
    finalize(() => this.downloadURL = fileRef.getDownloadURL() )
 )