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

【问题标题】：How to fix Unsupported field value error in angular firestore?如何修复 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 {} 对象）。不知道当我将它存储在数组中时会发生什么！

【问题讨论】：

标签： javascript angular firebase firebase-storage angularfire2

【解决方案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() 调用，并将类实例对象作为参数。

【讨论】：