Добрый день. Т.к. после запуска продакшена на React, Next, Nuxt 3, Vue все Ваши новые статические файлы будут читаться только после ребилда, если вы храните статику на фронтенде, то в данной статье расмотрим как же сохранить Ваши файлы на сервере express js. Тем более это очень актуально сейчас, хранить все файлы у себя, а не на сторонних облачных сервисах, ввиду возможной их окончательной блокировки в России. В этой статье не буду описывать полную установку express со всеми нужными модулями. Итак, приступим..
В корневом индексном файле express вписываем строки:
app.use("/uploads", express.static("uploads"));
Она сообщает нашему серверу,ч то будет использоваться статическая папка uploads из корня нашего бэкенда.
Далее импортируем библиотеку multer
import multer from "multer";
const upload = multer({
storage: multer.memoryStorage(),
});
Загружаемые файлы будут временно храниться в памяти
И далее, обрабатываем загрузку файла
import sharp from "sharp";
app.post('/addFile', function(req, res){
try {
const image = req.file;
if (!image) { //Обычная проверка есть ли файл в request
return res.status(401).json({
message: "Необходимо загрузить изображение",
success: false,
});
}
const newFileName = `${Date.now()}-${image.originalname}`;
const resizedImg = await sharp(image.buffer)
.resize({
width: 800,
height: 800,
fit: "inside",
})
.toFormat("webp")
.toFile(`./uploads/${newFileName}`);
return res.status(200).json({
success: true,
message: "Файл успешно добавлен",
});
} catch (error) {
console.log(error);
}
};
Сначала проверяем, есть ли в request наш файл такой строкой:
if (!image) {
return res.status(401).json({ message: "Необходимо загрузить изображение", success: false, }); }
Создаем новое уникальное имя дла нашего файла
const newFileName = `${Date.now()}-${image.originalname}`;
Преобразовываем наш файл в формат webp т.к. занимает мало места на сервере, а качество остается прежним. И кладем наш файл в папку uploads с новым именем.
const resizedImg = await sharp(image.buffer)
.resize({width: 800, height: 800,fit: "inside",})
.toFormat("webp") .toFile(`./uploads/${newFileName}`);
В ответе на фронтенд можно вернуть имя или полный путь нашего нового файла или записать в базу данных путь к нашему файлу. Теперь после на продакшене будет работать загрузка наших новых файлов и не нужно делать постоянные ребилды.
Если есть вопросы...пишите в комментариях...обязательно отвечу..
