Как бэкэнд-разработчику, мне всегда было трудно найти правильный и простой способ обработки действий по загрузке изображений. Когда имеешь дело с изображениями, нужно думать о многом.
- Где хранить изображения.
- Как кодировать/декодировать изображения.
- Как сжать изображения
- Прием изображений в определенном формате (.jpg, .png и т. д.)
- Проверка изображений.
Что ж, для решения всех этих проблем у нас есть замечательная библиотека в Node под названием Multer.
Multer — простая в использовании и удобная для начинающих библиотека. Все, что вам нужно сделать, это выполнить следующие шаги, и вы станете мастером обработки изображений.
Прежде всего, установите в своем приложении пакет узла под названием multer.
npm i multer
Импортируйте его в файл, где вы хотите его использовать.
import multer from "multer";
Теперь вам нужно определить место, где вы хотите хранить изображения, и это можно легко сделать с помощью diskStorage.
//Define storage for the images
const multerStorage = multer.diskStorage({
destination: (request, file, callback) => {
callback(null, "./public/uploads/images");
},
//add back the extension
filename: (request, file, callback) => {
callback(null, Date.now() + file.originalname);
},
});
В приведенном выше коде вы можете видеть, что мы определяем место назначения и имя файла изображения. Оба они принимают запрос, файл и функцию обратного вызова в качестве аргументов. Давайте разберемся в этих аргументах.
Запрос: он содержит всю информацию, которую вы получаете от внешнего интерфейса, например номер порта, IP-адрес, данные json и т. д.
Файл. Содержит информацию/данные об изображениях, которые были загружены пользователем.
Обратный вызов: это просто функция, определенная вне области действия diskStorage. Его задача — взять данные и выполнить необходимые операции для их сохранения.
Мы также можем ограничить ваше приложение, чтобы принимать только изображения определенного формата.
//reject a file
const multerFilefilter = (req, file, cb) => {
if (file.mimetype === "image/jpeg") {
cb(null, true);
} else {
cb(null, false);
}
};
В приведенной выше функции мы установили правило, исключающее только изображения в формате jpeg.
Теперь, когда мы определили механизм фильтрации файлов, давайте воспользуемся им.
//uploads parameters for multer
const upload = multer({
storage: multerStorage,
limits: {
fileSize: 1024 * 1024 * 5,
},
fileFilter: multerFilefilter,
});
В приведенной выше функции мы объединяем весь функционал, который мы изучили, и это используется в качестве мидлвара.
Мы также ограничиваем размер изображения.
Теперь пришло время использовать все это и применить к нашим конечным точкам, чтобы всякий раз, когда мы получаем требуемую загрузку, мы могли обрабатывать ее без каких-либо трудностей.
router.post("/profile", upload.single("image"), async (req, res) => {
// This is the profile Pic that the user uploaded
let userImage = req.file.path;
const user_id = req.user["_id"];
User.findById(user_id, function (err, data) {
// Path for previous profile pic
const path = data.image;
//check if profile pic is valid
data.image = profilePic ? profilePic : data.image;
data
.save()
.then((doc) => {
// response with image
res.status(201).json({
status: "success",
message: "Profile Image Updated Successfully",
});
})
.catch((err) => {
res.json({
status: "failed",
error: err,
});
});
});
});
В приведенной выше функции мы установили промежуточное ПО в нашей конечной точке. Всякий раз, когда мы получаем запрос на загрузку изображения в конечную точку ‘/profile’. Загрузив функцию, мы получим триггер, данные изображения будут очищены, и у нас будет userImage.
Теперь у вас есть userImage в этом почтовом запросе, вы можете выполнять все свои операции и сохранять эти данные в своей базе данных.
Если вы узнали что-то новое, поставьте лайк или, лучше сказать, аплодируйте этому посту😂, а также поделитесь этим с друзьями.
