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，所以该变量已被删除，因此每次都会返回undefined。如果angularfire2/storage/task.js文件中的该行更改为：

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

使用Firebase 5 +返回上传图片的正确网址。

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

Answer 1

Firebase 5.0已从上传任务中删除downloadURL()，我们已在最近的AngularFire版本中镜像了此更改。

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

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

AngularFireStorage为每次上传

1 个答案: