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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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