Как загружать файлы с помощью multer в приложении MERN

Загрузка файлов — это обычная операция для любых приложений. В Node.js, с веб-фреймворком Express и библиотекой Multer, добавить функцию загрузки файлов в ваше приложение очень просто. В этом руководстве мы узнаем, как загружать файлы на сервер с помощью Multer и Express в Node.js и отображать их в React App. В конце этого блога вы сможете интегрировать загрузку файлов в свои собственные приложения.

Что такое Multer?

Multer — это промежуточное программное обеспечение node.js для обработки multipart/form-data, которое в основном используется для загрузки файлов. Он написан поверх busyboy для достижения максимальной эффективности. Из этого можно понять, что multer используется для обработки multipart/form-data.
**

Что такое многочастичные данные?

**
Когда отправляется «форма», браузеры используют тип содержимого «application-xx-www-form-urlencoded». Этот тип содержит только список ключей и значений и поэтому не способен загружать файлы. Если же вы настроите форму на использование типа содержимого «multipart/form-data», браузеры создадут сообщение «multipart», где каждая часть будет содержать поле формы. Многочастное сообщение будет состоять из текстового ввода и ввода файла. Таким образом, используя multipart/form-data, вы можете загружать файлы.

Multer добавляет к объекту запроса объект body и объект file или files. Объект body содержит значения текстовых полей формы, а объект file or files — файлы, загруженные через форму.

Multer не будет обрабатывать форму, которая не является многочастичной (multipart/form-data).
Теперь давайте погрузимся в код.
Прежде всего вам нужно установить multer в ваше приложение Node.js, выполнив следующую команду:

//installation of multer module
npm install multer --save

В этом проекте мы будем хранить файлы в папке с именем «images» в папке «public».
Мы создадим файл с именем «upload.js» (назовите его как хотите) и загрузим в него multer, я использую метод импорта, если вы работаете с require, не стесняйтесь.

DiskStorage
Механизм дискового хранилища дает вам полный контроль над хранением файлов на диске. Мы создадим объект хранилища с помощью метода diskStorage().
Следующий код будет находиться в файле upload.js

const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, './public/images');
    },
    filename: function (req, file, cb) {
        cb(null, Date.now() + "--" + file.originalname);
    }
});  

Есть два свойства, destination и filename. Оба они являются функциями.

destination — может быть задано в виде строки (например, ‘./public/images’). Если назначение не указано, используется каталог по умолчанию операционной системы для временных файлов. Создание каталога обязательно, если вы используете destination в качестве функции. В противном случае, если вы используете destination как строку, multer позаботится о том, чтобы каталог был создан за вас.

filename — Используется для определения того, как должен быть назван файл внутри папки. Если вы не укажете имя файла, то каждому файлу будет присвоено случайное имя без расширения. Вы должны предоставить функцию, которая будет возвращать полное имя файла с расширением. Обе эти функции принимают 3 аргумента — объект запроса, объект файла и функцию обратного вызова (здесь cb — функция обратного вызова). Два аргумента для cb — это:

null : так как мы не хотим показывать ошибку.
file.originalname: имя файлов, в которые они загружены.
Мы будем использовать Date.now() + "--" + file.originalname
чтобы убедиться в уникальности имен файлов.

let upload = multer({ 
storage: storage,
 limits : {fileSize : 3000000
});

Здесь мы вызвали **метод multer(). Он принимает объект options со свойством storage, которое указывает Multer, куда загружать файлы. и **limits (это опция, не обязательная) для ограничения размера файла (1000000 байт = 1мб).

Другие опции:
fileFilter — Задайте эту функцию, чтобы контролировать, какие файлы должны быть загружены, а какие должны быть пропущены. Функция должна выглядеть следующим образом:

const fileFilter = (req, file, cb) => {
    if((file.mimetype).includes('jpeg') || (file.mimetype).includes('png') || (file.mimetype).includes('jpg')){
        cb(null, true);
    } else{
        cb(null, false);
    }
};

export default upload.single('file-demo')

.single() используется для загрузки одного файла.

Обратите внимание, что имя поля, которое вы указываете в данных формы, должно быть таким же, как и в multer({..}).single() (здесь имя — file-demo).

Мы должны экспортировать выгрузку по умолчанию, чтобы использовать ее как промежуточное ПО в маршрутах.
Нет перейдите в папку routes и добавьте следующий код:

import upload from "./upload.js";
const router = express.Router();
router.post('/', upload, (req, res) => {
   const file = req.file.filename;
   const newImage = {file-demo : file}
   try{
     await newImage.save();
     res.status(201).json(newimage );
   }catch(error){
     res.status(409).json({ message: error.message });
   }

});

Для отображения изображений в приложении react используйте следующее :

// the url of your api following /public/images/
const url_imgs = "http://localhost:3001/public/images/"
<img
   src={`${url_imgs}${demo-file}`}
   alt=""
   />

Теперь мы знаем, как интегрировать загрузку файлов с помощью multer в любое приложение. Вперед! Создайте свое собственное приложение с полным фронтендом и интегрируйте загрузку файлов, используя полученные выше знания.

Не прекращайте учиться!