Как загрузить файл на сервер в ExpressJS
Современные веб-приложения позволяют пользователям загружать изображения и другие файлы. Возможность загрузки файлов является общим требованием при создании REST API в ExpressJS.
В этой статье мы рассмотрим, как выполнить загрузку и сохранение одного файла в NodeJS.
Установка
Сначала давайте создадим новое NodeJS приложение.
# создаем папку и переходим в нее
$ mkdir nodejs-upload-files && cd nodejs-upload-files
# инициализируем новое nodejs приложение
$ npm init -y
# ставим зависимости
$ npm install express body-parser cors express-fileupload morgan lodash --save
Вот что делает каждый из вышеперечисленных пакетов:
- express - Популярный NodeJS веб-фреймворк.
- body-parser - (промежуточное программное обеспечение - мидлвар) разбирает тело входящего запроса и делает доступным его через свойство req.body.
- cors - другой мидлвар для работы с CORS запросами (совместное использование ресурсов из разных источников).
- express-fileupload - простое промежуточное программное обеспечение для загрузки файлов. Оно обрабатывает запросы на загрузку файлов на сервер, извлекает эти файлы, если они доступны, и делает их доступными в свойстве req.files.
- lodash - Библиотека JavaScript, которая предоставляет служебные функции для массивов, чисел, объектов, строк и т.д.
Создаем ExpressJS сервер
После установки необходимых зависимостей приступим к созданию нашего сервера ExpressJS.
const express = require('express');
const fileUpload = require('express-fileupload');
const cors = require('cors');
const bodyParser = require('body-parser');
const crypto = require('crypto');
const _ = require('lodash');
const app = express();
// делаем доступными загрузку файлов
app.use(fileUpload({
createParentPath: true
}));
// добавляем мидлвары
app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));
// устанавливаем порт приложения
const port = process.env.PORT || 5000;
app.get('/', async (req, res) => {
res.send({ message: 'Привет' })
});
// запускаем
app.listen(port, () =>
console.log(`Приложение на порту ${port}.`)
);
Загружаем файл
Теперь создадим маршрут, позволяющий пользователям загружать фотографии своего профиля.
app.post('/upload/profile-image', async (req, res) => {
try {
// если файлов нет
if (!req.files) {
// отправляем ответ, что нет файлов для загрузки
res.send({
status: false,
message: 'Нет файлов для загрузки'
});
} else {
// Используем название поля profile_image из html разметки для получения ссылки на загружаемый файл
const avatar = req.files.profile_image;
const filename = crypto.createHash('md5').update(avatar.name).digest('hex');
// расширение файла
const extension = avatar.name.substring(avatar.name.lastIndexOf('.') + 1);
// используем метод mv() для сохранения файла в папке ./user/avatars/
avatar.mv('./user/avatars/' + filename + '.' + extension);
// отправляем ответ
res.send({
status: true,
message: 'Файл загружен',
data: {
name: filename,
extension: extension,
mimetype: avatar.mimetype, // тип картинки, как он пришел от клиента
size: avatar.size
}
});
}
}
catch (err) {
// отправляем 500 код об ошибке
res.status(500).send(err);
}
});
Как работает мидлвар express-fileupload?
Он делает загруженные файлы доступными в свойстве req.files. Например, если вы загружаете файл с именем profile-image.jpg, а название поля для загрузки файла - profile_image, вы можете получить к нему доступ через свойство req.files.profile_image.
Объект profile_image будет содержать следующую информацию:
- profile_image.name - Имя загруженного файла, т. е. profile-image.jpg
- profile_image.mv - Функция для перемещения файла в другое место на сервере
- profile_image.mimetype - Тип файла
- profile_image.size - Размер файла в байтах
- profile_image.data - Бинарное представление загруженного файла
Вот так просто можно загрузить файл на сервер в ExpressJS с помощью библиотеки express-fileupload.
-
Создано 08.08.2023 11:04:27
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.