Pouchdb 添加附件

在使用 Pouchdb 进行数据存储的过程中，有时候我们需要将附件（如图片、音频、视频等等）与文档关联起来。Pouchdb 提供了方便的 API 帮助我们实现附件的添加和获取。

添加附件

在 Pouchdb 中，添加附件是通过存储一个 base64 编码的字符串来实现的。下面是一个添加图片附件的示例：

const db = new PouchDB('my-db');

// 定义一个 JavaScript 对象文档
const doc = {
  _id: 'my-doc',
  name: 'John',
  age: 30
};

// 将图片加载进来
fetch('https://example.com/my-image.png')
  .then(response => response.blob())
  .then(blob => {
    // 通过 FileReader 将图片转化为 base64 编码的字符串
    const reader = new FileReader();
    reader.readAsDataURL(blob);
    reader.onloadend = () => {
      // 将 base64 编码的字符串作为附件存储到文档中
      db.putAttachment(doc._id, 'my-image.png', reader.result, blob.type)
        .then(response => console.log('Attachment added successfully'))
        .catch(error => console.error('Error adding attachment:', error));
    };
  });

在这个示例中，我们首先定义了一个 JavaScript 对象文档，然后使用 fetch API 加载了一张图片。将图片转化为 base64 编码的字符串需要使用 FileReader，这一步操作是异步的，需要等待 FileReader 的 loadend 事件触发。最后，我们使用 db.putAttachment() 方法将 base64 编码的字符串作为附件存储到文档中。

获取附件

在文档中存储了附件后，我们可以使用 db.getAttachment() 方法获取附件。下面是一个获取图片附件的示例：

const db = new PouchDB('my-db');

// 获取文档以及对应的附件
db.get('my-doc', {attachments: true})
  .then(doc => {
    // 获取图片附件
    return db.getAttachment(doc._id, 'my-image.png');
  })
  .then(attachment => {
    // 创建一个 URL 对象，用于访问图片
    const url = URL.createObjectURL(attachment);
    // 在 HTML 中显示图片
    const img = document.createElement('img');
    img.src = url;
    document.body.appendChild(img);
  })
  .catch(error => console.error('Error getting attachment:', error));

在这个示例中，我们使用 db.get() 方法获取文档以及对应的附件。获取到文档后，我们可以使用 db.getAttachment() 方法获取指定名称的附件。获取到附件的二进制数据后，可以将其创建为 URL 对象，用于在 HTML 中展示图片。

总结

使用 Pouchdb 添加和获取附件是一件比较容易的事情。我们可以使用 fetch API 加载附件，使用 FileReader 将附件转化为 base64 编码的字符串，然后使用 db.putAttachment() 将附件存储到文档中。获取附件时，我们可以使用 db.getAttachment() 方法获取附件的二进制数据，然后将其创建为 URL 对象，在 HTML 中呈现附件。