将文件放入“IDBObjectStore”时如何使用 RxDb 解决 Angular 应用程序中的“DataCloneError”？

Question

我目前在使用 RxDb 进行数据存储的 Angular 应用程序中遇到一个问题。我遇到的错误是：

main.4e29907b55c8d8bf.js:1 ERROR Error: Uncaught (in promise): DataCloneError: Failed to execute 'put' on 'IDBObjectStore': function arrayBuffer() { [native code] } could not be cloned.DataCloneError: Failed to execute 'put' on 'IDBObjectStore': function arrayBuffer() { [native code] } could not be cloned.

此错误似乎与处理 RxDb 中的文件类型时对“IDBObjectStore”的“放置”操作有关。导致该问题的具体代码片段如下：

    async addNewProductForSyncLater(product: Product): Promise<void> {
    product.key = "23";

    let rxDocument: RxDocument = await this.myDatabase['syncProducts'].insert(product);

    try {
      const attachment = await rxDocument.putAttachment({
        id: product.key,  
        data: product.image,
        type: product.image.type
      });

      console.log("Attachment added:", attachment);
    } catch (error) {
      console.error('Error adding attachment:', error);
    }
  }

这是界面

    export interface Product {
  key ?: string ;
  name :string ;
  basePrice :number ;
  salePrice :number ;
  quantity :number ;
  image : File;
  imageUrl: string;
  category :Category;
  sellQuantity:number ;
}

请注意，当方法有效并且图像属性保存从输入字段中选择的文件时，这是产品

Answer 1

IndexedDB 只能存储结构化可克隆的类型，不包括所有可能的 JS 变量。例如，函数不是结构化可克隆的。

因此，您尝试存储的对象的某些属性不是结构化可克隆的。如果您不确定什么，我建议您删除其中的内容，直到它起作用为止，然后您可以识别有问题的属性并找出它不起作用的原因以及如何处理它。