2

На 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 правильный: Network

Вопрос: как отобразить эту картинку в браузере? Пробовал переводить во всевозможные кодировки и отображать, например, следующим образом:

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);
}

Но результат в браузере всегда одинаковый: нет картинки Уже третий день не могу понять, в чём может быть проблема? Что я делаю не так?

2 ответа 2

0

Во-первых не используйте sync функции так как они блокируют процесс, оборачивайте в Promise, чтобы в дальнейшем использовать вместе с async + await:

function writeFile(path, data) {
    return new Promise((resolve) => {
        fs.writeFile(path, data, resolve);
    });
}

Чтобы выслать в ответ изображение достаточно использовать createReadStream, ну а точнее в ответе будет поток буферов:

//сохраняю её локально
let filePath = path.join(__dirname, '../', '/uploads/file.jpg');
// наша функция обернутая в Promise
await writeFile(filePath, dbres.file.buffer);

fs.createReadStream(filePath).pipe(res);

Я не знаю реализацию Вашей функции Api, покажу на примере простого fetch:

async downloadFile() {
    const response = await fetch('/fileById', {
        method: 'POST',
        body: // то что вы отправляете на этот URL
    });

    const buffer = await response.arrayBuffer();
    const bytes = new Uint8Array(buffer);
    const blob = new Blob([bytes.buffer]);

    const image = document.createElement('img');
    const reader = new FileReader();

    reader.addEventListener('load', (e) => {
        image.src = e.target.result;
        this.$el.append(image);
    });

    reader.readAsDataURL(blob);
}

Либо используя TextDecoder (поддерживается только в IE + Edge), но можно установить полифил:

async downloadFile() {
    const response = await fetch('/fileById', {
        method: 'POST',
        body: // то что вы отправляете на этот URL
    });

    const buffer = await response.arrayBuffer();
    const bytes = new Uint8Array(buffer);
    const decoder = new TextDecoder('utf8');

    const image = document.createElement('image');
    image.src = btoa(decoder.decode(bytes));
    this.$el.append(image);
}
0
0

Лично мне помогло преобразовать полученный поток буферов в ссылку, которую просто поместил в src в <img>:

async getUrlFile() {
    const response = await fetch('/fileById');

    const blob = await response.blob();
    const url = window.URL.createObjectURL(blob);
            
    return url;
}

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.