Question

我正在尝试让PouchDB返回一个小的图像附件。当我通过Fauxton上传图像时，我的应用程序成功返回了一个<img>的Blob，该Blob在我的URL.createObjectURL元素中正确呈现（使用PouchDB.getAttachment()）。

但是，如果我让用户上载图像，然后将文件Blob放到我的远程Pouch数据库中，则会出现问题。在这种情况下，尽管type: 'application/octet-stream'返回的是带有'image/svg+xml'而不是content_type的Blob，尽管已使用正确的var image = new Blob([fs.readFileSync(fileLocation, 'utf-8')], { type: 'image/svg+xml' })上传了它。该图像无法渲染，这给了我一个通用的浏览器img占位符。

为什么会这样？

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

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

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

{{1}}

Answer 1

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

base64编码blob有很多不同的方法，但是最简单的解决方案是将放置它的方法从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返回错误的图像附件类型

1 个答案: