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

Question

我试图让 PouchDB 返回一个小图像附件。当我通过 Fauxton 上传图像时，我的应用程序成功返回了一个带有 type: 'image/svg+xml' 的 Blob在我的 <img> 中正确呈现元素(使用 URL.createObjectURL )。

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

为什么会发生这种情况？

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

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

第二步以下是我将文档(和附件)放入 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 编码。

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(...)
...