PouchDB 返回错误的图像附件类型

Question

我正在尝试将 PouchDB 添加到 return 一个小图像附件。当我通过 Fauxton 上传图像时，我的应用程序成功地 returns 一个带有 type: 'image/svg+xml' 的 Blob，它在我的 <img> 元素中正确呈现（使用 URL.createObjectURL）。

但是，如果我让用户上传图像，然后将文件 Blob 放入我的远程 Pouch 数据库，我就会遇到问题。在这种情况下，PouchDB.getAttachment() 现在 return 是一个带有 type: 'application/octet-stream' 而不是 'image/svg+xml' 的 Blob，尽管它已使用正确的 content_type 上传。此图像不呈现，给我一个通用的浏览器 img 占位符。

为什么会发生这种情况？

第 1 步这是我从用户那里检索图像的方法：

var image = new Blob([fs.readFileSync(fileLocation, 'utf-8')], {
   type: 'image/svg+xml'
})

第 2 步这是我将文档（和附件）放入 PouchDB 的方法：

var doc = await PouchDB.get(docID, {attachments: true})
doc._attachments = {
    'logo.svg': {
        content_type: 'image/svg+xml',
        data: image
    }
}
await PouchDB.put(doc)

Answer 1

您在读取文件时遇到了 2 个问题。首先是您不能将二进制数据视为 UTF8（SVG 文件可能不是真正的问题，但对于其他图像肯定是），第二个是您必须对其进行 base64 编码。

对 blob 进行 base64 编码有许多不同的方法，但最简单的解决方案是将其放置方法从 put 更改为 putAttachment。像这样：

HTML:

...
<input type="file" id="inputFile">
...

JS:

...
var inputFile = document.querySelector('#inputFile');
var file = inputFile.files[0];
db.putAttachment('mydoc', 'myfile', file, file.type).then(...)
...

PouchDB 返回错误的图像附件类型

PouchDB returning wrong image attachment type

javascript

blob

pouchdb

electron