每次上传的 AngularFireStorage returns 未定义 URL

Question

所以我在我的 Angular 6 网络应用程序中设置了 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) 时，它 return 都是一个未定义的值。我从来没有从 AngularFireStorage 收到过实际下载 URL，总是 returns undefined。我可以验证正确的图像被上传到存储桶中，即使它具有相同的文件名，它也会覆盖旧的。为了尽可能清楚，这里是文件的 <input>：

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

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

编辑：对于仍然关注此 post 的任何人，我最终只使用了 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);
        }
      );
    });
  }

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

编辑 2：

所以在做了一些研究并查看了 angularfire2/storage 模块后，我注意到它使用的是已弃用的 firebase 方法，这些方法从 5.0.0 版开始被删除。这是发行说明：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，该变量已被删除，因此每次都会 return undefined .如果 angularfire2/storage/task.js 文件中的该行更改为：

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

使用 Firebase 5+ 上传的图像 return 是正确的 URL。

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

Answer 1

我在使用 Firebase 4.10.1 时遇到了同样的问题。经过大量研究但未能找到问题所在，我所做的是将我的 Firebase 版本更新到 4.13.1，这样问题就消失了。目前我有以下版本的 Firebase 和 Angularfire2：

"angularfire2": "^5.0.0-rc.7"
"firebase": "^4.13.1"

您可以尝试使用这些版本，但请注意，您可能会收到以下警告：存储在 Firestore 中的日期对象的行为将发生变化，您的应用可能会崩溃。为了解决这个问题，您应该将以下内容添加到 app.component.ts 的构造函数中：

constructor (private afs: AngularFirestore) {
    afs.firestore.settings({ timestampsInSnapshots: true });
}

可能的警告参考：https://github.com/firebase/firebase-js-sdk/issues/726

Answer 2

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

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

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

每次上传的 AngularFireStorage returns 未定义 URL

AngularFireStorage returns undefined URL for every upload

firebase

firebase-storage

angularfire2

angular