如何修复 Angular Firestore 中不支持的字段值错误?

Posted

技术标签:

【中文标题】如何修复 Angular Firestore 中不支持的字段值错误?【英文标题】:How to fix Unsupported field value error in angular firestore? 【发布时间】:2021-02-14 17:23:04 【问题描述】:

以下是将图像推送到火存储的代码。

item.images.forEach((image) => 
  this.pushImage(image, `items/$this.itemId/images/`);
);

  pushImage(image, basePath) 
    const imgId = returnRandStr();
    const route = `$basePath$imgId`;
    const imageRef = this.angularFireStorage.ref(route);

    return concat(
      imageRef.put(image)
        .snapshotChanges().pipe(ignoreElements()),
      defer(() => imageRef.getDownloadURL())
    ).toPromise()
  

图像对象有如下形式

File 
  lastModified: 1604278838065
  lastModifiedDate: xxx
  name: "image_test.jpeg"
  size: 131560
  type: "image/jpeg"
  webkitRelativePath: ""

所以图像是一个数组。

但问题是我收到以下错误:

vendor.js:16168 错误 FirebaseError:使用无效数据调用函数 DocumentReference.set()。不支持的字段值:自定义 File 对象

enter image description here

注意请注意,如果我将图像推送到存储而不将其存储在数组中(即,只要我直接收到 $event.target.files[0]),那么我就赢了'不会收到此错误消息。但是,当我将图像存储在数组中并遍历数组并为每个图像执行推送功能时,就会抛出此错误。 (似乎存储图像文件会导致问题,但我在推送之前已经仔细检查过,它仍然是同一个 File 对象。)

请注意,即使引发了此错误,图像也会被上传到 FIRESTORAGE。 && 我也收到了已解析的图片下载网址。

那么我怎样才能防止这个异常。在将图像对象推送到火存储之前,我已经检查了它(它仍然是同一个 File 对象)。不知道当我将它存储在数组中时会发生什么!

【问题讨论】:

【参考方案1】:

它说:“不支持的字段值:自定义文件对象”。 Firebase 不支持设置类实例对象,添加文档。 要消除此错误,请将您的文件对象转换为纯 js 对象:

const file = new file();
docRef.set(Object.assign(, file));

在您的代码中,我认为当您调用 put 方法时会触发错误,因为您的图像是一个 File 对象:

...
return concat(
      imageRef.put(Object.assign(, image))
        .snapshotChanges().pipe(ignoreElements()),
      defer(() => imageRef.getDownloadURL())
    ).toPromise()
...

或者尝试在代码中查找 docRef.set() 或 docRef.add() 调用,并将类实例对象作为参数。

【讨论】:

以上是关于如何修复 Angular Firestore 中不支持的字段值错误?的主要内容,如果未能解决你的问题,请参考以下文章

如何修复 React Native 中的 Firebase/firestore 错误?

如何在 Angular(6) 和 firebase Firestore 设置中分页返回前一页

如何修复未在 Flutter 项目中安装的 Cloud Firestore 包?

我们如何使用 Angular 按 TimeStamp 数据类型对 Firebase Firestore 数据进行排序?

如何在从firestore数据库获取数据时修复状态更新

为啥我会收到此错误错误状态:使用 Firestore 时 DocumentSnapshotPlatform 中不存在字段?