Если вы создаете приложение с полным стеком и хотите разрешить пользователям загружать изображения на свою панель инструментов, это руководство именно для вас.
В этом руководстве мы будем использовать два пакета 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.
спасибо, пожалуйста, не стесняйтесь обращаться ко мне, если вы хотите получить разъяснения по любому из файлов.