PouchDB возвращает неправильный тип вложения изображения - PullRequest
Новая
       10

PouchDB возвращает неправильный тип вложения изображения

0 голосов
/ 04 июня 2019

Я пытаюсь заставить PouchDB вернуть вложение маленького изображения. Когда я загружаю изображение через Fauxton, мое приложение успешно возвращает BLOB-объект с type: 'image/svg+xml', который правильно отображается в моем элементе <img> (с использованием URL.createObjectURL).

Однако, если у меня есть пользователь, загружающий изображение, а затем помещающий файл Blob в мою удаленную базу данных Pouch, у меня возникают проблемы. В этом случае PouchDB.getAttachment() теперь возвращает BLOB-объект с type: 'application/octet-stream' вместо 'image/svg+xml', несмотря на то, что загрузил его с правильным 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)

1 Ответ

1 голос
/ 04 июня 2019

У вас 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(...)
...
...