Firebase不能下载Url吗？

Question

我有一个包含以下代码的服务 TypeScript 文件

export class FirebaseService {
  constructor(private afs: AngularFirestore, private storage: AngularFireStorage) {}

  uploadFile(file: any) {
    const filePath = 'path/to/save/file';
    const fileRef = this.storage.ref(filePath);
    const task = this.storage.upload(filePath, file);
    return task.snapshotChanges().pipe(
      finalize(() => {
        return fileRef.getDownloadURL()
      })
    ).toPromise();
  }

  createDocument(collection: string, name: string, file: any) {
    this.uploadFile(file).then(downloadURL => {
      if (downloadURL) {
        const data = {
          title: name,
          downloadURL: downloadURL
        };
        this.afs.collection(collection).add(data);
      } else {
        console.log("downloadURL is not defined.");
      }
    });
  }
}

在我的组件中，我有以下代码

export class CreatePage implements OnInit {
  name = ""

  file: any;

  onFileChanged(event: any) {
    this.file = event.target.files[0];
  }
  onSubmit() {
    console.log("this.selectedOption = ",JSON.stringify(this.selectedOption))
console.log("this.name = ",JSON.stringify(this.name,))
console.log("this.file = ",JSON.stringify(this.file))
console.log("TEST", this.file)

    this.firebaseService.createDocument(this.selectedOption, this.name, this.file)

    this.name = "", this.selectedOption = ""
  }
}

控制台日志中的 4 个值中的 output 是：

Selected option: freunde
this.selectedOption =  "freunde"
this.name =  "test"
this.file =  {}
TEST File {name: 'berge.jpg', lastModified: 1673618629595, lastModifiedDate: Fri Jan 13 2023 15:03:49 GMT+0100 (Mitteleuropäische Normalzeit), webkitRelativePath: '', size: 990092, …}
Selected option: 

HTML 看起来像这样：

<ion-item>   <input type="file"  (change)="onFileChanged($event)"> </ion-item>

我该如何解决这个问题？ 错误消息如下：

core.mjs:9095 ERROR Error: Uncaught (in promise): FirebaseError: [code=invalid-argument]: Function addDoc() 使用无效数据调用。 不支持的字段值：未定义（在文档 freunde/lcAwFcHvQSo5iV6ExQPi 的字段 downloadURL.metadata.cacheControl 中找到）

它会将图像上传到存储，但不会将下载的 url 上传到 firebase firestore 中。 有谁可以帮助我吗？

打印数据 object 后 Object 看起来像这样

data =  {
  "title": "test",
  "downloadURL": {
    "source": {
      "source": {
        "source": {}
      }
    }
  }
}

Answer 1

调试步骤 1。

让您的代码准确显示您发送到 Firebase 的内容。将 console.log 更改为三个 console.log

console.log("this.selectedOption = ",JSON.stringify(this.selectedOption,null,2))
console.log("this.name = ",JSON.stringify(this.name,null,2))
console.log("this.file = ",JSON.stringify(this.file,null,2))

还要在调用add ：

在这之前：

this.afs.collection(collection).add(data);

添加这个：

console.log("data = ", JSON.stringify(data, null, 2))

在您的问题中显示上面的确切 output

这将最大限度地提高我们发现问题的机会。

为什么JSON.stringify ？

从您的评论中我可以看出您对我使用JSON.stringify的建议感到恼火。 使用它的原因是强制 console.log output 成为当时变量的瞬时值，而不是自动更新的值，该值可能在控制台上显示的值与您的程序在错误的时间。

您现在可以看到 JSON.stringify 的实用程序！

您的简单 console.log(this.file) 正在报告已填充属性的完整值。

但是 JSON stringify 向您显示，在该行运行时， this.file只是 {}，即一个空的 object。发送的是 Firebase {}，而不是填充的 object。

您还可以看到,null,2的值

这将防止在以下位置截断一行：

size: 990092, ...

Stack Overflow 的志愿者因此能够判断 object 中是否有undefined的内容或以其他方式与 Firebase 冲突。

这些调试技巧可以帮助我们帮助您。 如果您不听从我们提供的建议，就会降低人们提供帮助的热情。

Answer 2

我现在已经用下面的代码解决了我的问题。

我将 uploadFile Function 更改为以下内容：

uploadFile(file: any) {
    const filePath = 'images/file';
    const fileRef = this.storage.ref(filePath);
    const task = this.storage.upload(filePath, file);
    return task.snapshotChanges().toPromise().then(() => {
        return fileRef.getDownloadURL().toPromise()
    });
  }

我现在返回 Promise，而不是返回 object。这样我们就在等待 promise 解析并获取 downloadURL。 它应该可以解决问题并允许 createDocument 方法访问下载 URL 而不会出现任何错误。