Если вы создаете приложение с полным стеком и хотите разрешить пользователям загружать изображения на свою панель инструментов, это руководство именно для вас.

В этом руководстве мы будем использовать два пакета npm: multer и cloudinary.

Внешний интерфейс

<div class=”user-photo”>
  <img class=”profilepic” src=”https://via.placeholder.com/150"></div>

Бэкенд

Мы будем использовать фреймворк NodeJs для серверной части. Вам потребуются все обычные зависимости для работы с Express.

Проект будет разделен на маршрут и контроллеры.

Создайте файл multer.js в своем проекте, в файл скопируйте и вставьте приведенный ниже код.

import multer from 'multer';
const storage = multer.diskStorage({
destination(req, file, callback) {
callback(null, 'uploads/');
},
filename(req, file, callback) {
callback(null, new Date().toISOString().replace(/:/g, '-')
+ file.originalname);
},
});
const fileFilter = async (req, file, callback) => {
if (file.mimetype === 'image/jpeg'
|| file.mimetype === 'image/jpg'
|| file.mimetype === 'image/png') {
callback(null, true);
} else {
return callback(
{ message: 'This image format is not allowed' },
false
);
}
return true;
};
const Upload = multer({
storage,
limits: {
fileSize: 1024 * 1024 * 5,
},
fileFilter,
});
export default Upload;
  • Причина использования multer в том, что вы действительно можете получить файл, который загружает пользователь. Итак, мы получаем файл с помощью multer и загружаем его на облачный сервер, затем сохраняем ссылку в базе данных.
  • сначала импортировал мультер из мультера
  • функция storage использует метод класса multer для сохранения загружаемого изображения в папку загрузки, которая будет создана в корневом каталоге проекта. Второй объект имя файла имеет функцию обратного вызова, которую мы можем использовать для получения и форматирования имени файла по вашему выбору.
  • Функция fileFilter используется для проверки типа принимаемого файла. вы можете console.log(файл), чтобы увидеть другие его свойства.
  • Функция «Загрузить» — это место, где выполняется реальная загрузка, здесь вы также можете добавить ограничения на размер загружаемого изображения.
  • Я экспортировал только функцию загрузки, потому что это единственная функция, которая нам нужна в маршруте или контроллере.

Следующим шагом является создание файла cloudinary.js. Имя файла зависит от вас.

import cloudinary from ‘cloudinary’;
import dotenv from ‘dotenv’;
dotenv.config();
cloudinary.config({
cloud_name: process.env.CLOUDINARY_NAME,
api_key: process.env.CLOUDINARY_API,
api_secret: process.env.CLOUDINARY_SECRET
});
const cloudUpload = cloudinary.v2;
const cloud = {
uploadToCloud(req, res, next) {
const { path } = req.file;
cloudUpload.uploader.upload(path,
{
tags: ‘profilePicture’,
width: 150,
height: 150,
crop: ‘pad’,
})
.then((image) => {
req.image = image;
return next();
});
}
};
export default cloud;
  • сначала импортируйте cloudinary и импортируйте dotenv, где установлены переменные среды вашего приложения.
  • Инициализируйте метод конфигурации, чтобы загрузить все переменные в этот файл.
  • метод конфигурации в облачном классе, который мы импортировали, заключается в настройке вашей облачной учетной записи. Когда вы зарегистрируетесь в Cloudinary, вам будут предоставлены учетные данные (храните их в безопасности).
  • убедитесь, что вы используете версию 2 для облачного API
  • функция uploadToCloud принимает 3 параметра request, response и next. Путь к изображению передается из мультера, и мы загружаем его в мультер с помощью метода загрузки.

Ниже приведен файл маршрута для загрузки изображения.

import { Router } from 'express';
import Upload from '../services/multer';
import cloudUpload from '../services/cloudinary';
// route to upload a picture
router.patch(‘/upload’,
Upload.single(‘profileImage’),
cloudUpload.uploadToCloud,
UserController.uploadPicture);
  • Я импортировал загрузку из multer.js и cloudIpload из cloudinary .js.
  • картинка была бы загружена до того, как попала бы в контроллер. Вы можете убедиться в этом, зайдя на свою панель управления в Cloudinary, чтобы проверить загруженное изображение.
  • в функции Upload.single profileImage — это имя свойства, которое мы отправляем из postman .
  • Чтобы использовать изображение во внешнем приложении, просто получите общедоступный URL-адрес и вставьте его в атрибут src в теге img.

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