Получение файлов на фронт (ReactJS) с бэка (NodeJS)

@Alastorial · Регистрация: 10.07.2022

Студворк — интернет-сервис помощи студентам

Все добрый день!
Я использую стек MERN. Столкнулся со следующей задачей - мне необходимо иметь возможность отправлять с фронта на бэк файлы (в основном картинки) и получить их позже обратно при запросе. Функционал получения бэком файлов я реализовал, однако хотел бы проконсультироваться с опытными людьми, как мне вытащить файлы уже с бэка. Мне нужно, чтобы фотографии загружались с бэка при загрузки страницы и отображались как backgroundImage у определенных блоков.

Я предположил, что можно на этапе получения бэком фотографий сериализовать их (например, перевести в base64) и в MongoDB записать уже их в сериализованном виде, потом на фронт получать эти данные, дессериализовывать их и отрисовывать.

Что думаете по этому поводу? Может у кого-то есть способ получше?

@DrType · 19.09.2022, 21:03

Можно просто складывать файлы изображений в папочку, находящуюся в пределах папки статических файлов.

@Alastorial · 19.09.2022, 22:40 **[ТС]**

Если вы имеете ввиду хранение на сервере, то я уже это сделал, но мне это ничего не дает в данный момент. На части фронта изображения будут часто сменять друг друга, поэтому я не могу обращаться каждый раз на бэк по ссылке за фотографией тк будет загрузка постоянно. Я полагаю, что преобразовать все изображения в base64 пока что самый оптимальный вариант.

krvsa · 19.09.2022, 23:03

Сообщение от Alastorial

Я полагаю, что преобразовать все изображения в base64 пока что самый оптимальный вариант.

Тогда зачем спрашиваешь про другие альтернативы?

@Alastorial · 19.09.2022, 23:35 **[ТС]**

Пока что самый оптимальный среди названных*
У тебя есть другое предложение?

krvsa · 20.09.2022, 08:48

Сообщение от Alastorial

У тебя есть другое предложение?

Мы складываем файлы в "паблик"... В БД хранятся только их имена.

Если ты считаешь что из БД фронт получит картинку быстрее чем инет-сервер ее отдаст из паблика - так ты ошибаешься.
Твой вариант будет работать медленнее.

@Alastorial · 20.09.2022, 12:10 **[ТС]**

Я планировал подгрузить все необходимые картинки для текущей страницы с бд при открытии страницы и хранить их base64 представления на фронте. Тогда мне не нужно будет при смене backgroundImage определенных блоков делать очередной запрос на получение картинки с бд, или как ты предлагаешь, с сервера. В моем случае, у меня есть блок, который так настроен, что при ведении мышкой и ее попадании в определенные области блока - у меня будет меняться фотография бэкграунда этого блока. Если у пользователя будет плохой инет, то картинки не будут быстро сменяться, поэтому мне нужно сразу все необходимое подгрузить на фронт, чтобы не приходилось постоянно делать запросы на бэк. Как я уже сказал ранее, мне нужно получить все необходимое сразу, я придумал для этого кодировать все файлы в base64, мой вопрос заключался в том, есть ли какие-либо другие способы передать все изображения с бэка на фронт сразу.

krvsa · 20.09.2022, 12:41

Сообщение от Alastorial

мне нужно сразу все необходимое подгрузить на фронт

Дык!

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
document.addEventListener("DOMContentLoaded", () => {
    const images = new Array();
 
    function preloadImages(...images) {
        images.forEach((image, i) => {
            image = new Image();
            image.src = preloadImages.arguments[i];
        });
    };
 
    // Предварительная загрузка нужных картинок
    preloadImages(
        "{Изображение}.png",
        "{Другое изображение}.jpg"
    );
});

https://only-to-top.ru/blog/co... tinok.html

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! */ #include <iostream> #include <stack> #include <cctype>. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@Alastorial 0 / 0 / 0 Регистрация: 10.07.2022 Сообщений: 5

	Получение файлов на фронт (ReactJS) с бэка (NodeJS) 19.09.2022, 20:39. Показов 10533. Ответов 7 Метки express, mongodb, node js, react js (Все метки) Все добрый день! Я использую стек MERN. Столкнулся со следующей задачей - мне необходимо иметь возможность отправлять с фронта на бэк файлы (в основном картинки) и получить их позже обратно при запросе. Функционал получения бэком файлов я реализовал, однако хотел бы проконсультироваться с опытными людьми, как мне вытащить файлы уже с бэка. Мне нужно, чтобы фотографии загружались с бэка при загрузки страницы и отображались как backgroundImage у определенных блоков. Я предположил, что можно на этапе получения бэком фотографий сериализовать их (например, перевести в base64) и в MongoDB записать уже их в сериализованном виде, потом на фронт получать эти данные, дессериализовывать их и отрисовывать. Что думаете по этому поводу? Может у кого-то есть способ получше? 0

@DrType 6553 / 3624 / 1075 Регистрация: 07.09.2019 Сообщений: 5,877 Записей в блоге: 1
	19.09.2022, 21:03
	Можно просто складывать файлы изображений в папочку, находящуюся в пределах папки статических файлов. 0

@Alastorial 0 / 0 / 0 Регистрация: 10.07.2022 Сообщений: 5
	19.09.2022, 22:40 [ТС]
	Если вы имеете ввиду хранение на сервере, то я уже это сделал, но мне это ничего не дает в данный момент. На части фронта изображения будут часто сменять друг друга, поэтому я не могу обращаться каждый раз на бэк по ссылке за фотографией тк будет загрузка постоянно. Я полагаю, что преобразовать все изображения в base64 пока что самый оптимальный вариант. 0

@Alastorial 0 / 0 / 0 Регистрация: 10.07.2022 Сообщений: 5
	19.09.2022, 23:35 [ТС]
	Пока что самый оптимальный среди названных* У тебя есть другое предложение? 0

@Alastorial 0 / 0 / 0 Регистрация: 10.07.2022 Сообщений: 5
	20.09.2022, 12:10 [ТС]
	Я планировал подгрузить все необходимые картинки для текущей страницы с бд при открытии страницы и хранить их base64 представления на фронте. Тогда мне не нужно будет при смене backgroundImage определенных блоков делать очередной запрос на получение картинки с бд, или как ты предлагаешь, с сервера. В моем случае, у меня есть блок, который так настроен, что при ведении мышкой и ее попадании в определенные области блока - у меня будет меняться фотография бэкграунда этого блока. Если у пользователя будет плохой инет, то картинки не будут быстро сменяться, поэтому мне нужно сразу все необходимое подгрузить на фронт, чтобы не приходилось постоянно делать запросы на бэк. Как я уже сказал ранее, мне нужно получить все необходимое сразу, я придумал для этого кодировать все файлы в base64, мой вопрос заключался в том, есть ли какие-либо другие способы передать все изображения с бэка на фронт сразу. 0

Получение файлов на фронт (ReactJS) с бэка (NodeJS)

Решение