На Node.js сервере использую Express.js. Есть следующая функция:
app.post('/fileById', async (req, res) => {
try {
//получаю картинку с MongoDB
let obj = {_id: ObjectID(req.body.id)};
await myMongo.getDoc(obj, 'files', (err, dbres) => {
if (err || !dbres) {
throw Error('File not found!');
} else {
//сохраняю её локально
let filePath = path.join(__dirname, '../', '/uploads/file.jpg');
fs.writeFileSync(filePath, dbres.file.buffer);
//отправляю клиенту
res.sendFile(filePath, (error) => {
if (error) throw error;
fs.unlink(filePath, (error) => { //и удаляю
if (error) console.error(error);
console.log('file was deleted');
});
});
}
});
} catch (e) {
res.status(404);
res.send('File not found!');
}
});
На клиенте следующая функция отправляет запрос с помощью Axios:
async downloadFile () { //метод компонента Vue
let response = await Api().post('fileById', {id: '5b57934138118306c0454f05'});
console.log(response);
console.log(response.data);
}
Как видно во вкладке Network инструментов разработчика, картинка пришла, заголовок Content-Type правильный:
Вопрос: как отобразить эту картинку в браузере? Пробовал переводить во всевозможные кодировки и отображать, например, следующим образом:
async downloadFile () {
let response = await Api().post('fileById', {id: '5b57934138118306c0454f05'});
let b64 = Buffer.from(response.data, 'binary').toString('base64');
let newImg = document.createElement('img');
newImg.src = 'data/image:jpeg;base64,' + b64;
this.$el.append(newImg);
}
Но результат в браузере всегда одинаковый:
Уже третий день не могу понять, в чём может быть проблема? Что я делаю не так?