Чтобы упростить работу пользователей, узнайте, как загружать изображения в облако с помощью Node.js и MongoDB.
Контур
⭐ Настройка мультера для загрузки изображений.
⭐ Загрузка изображения в облако.
⭐ Связывание изображения с базой данных MongoDB.
Недавно я решил создать свой собственный REST API, чтобы улучшить функциональность моего веб-сайта Fruit Shop.
С большими усилиями я смог создать свой собственный REST API для веб-сайта. Локально все работало отлично, включая графику и данные о товарах. Однако, когда я разместил свой API на Heroku, все начало ломаться.
Что я имею в виду, позвольте мне объяснить 👇
- Как вы можете видеть на изображениях выше, когда я получил данные с сервера, он вернул все продукты вместе со ссылками на их изображения.
- Однако, когда я нажимаю на ссылку изображения, я получаю сообщение об ошибке вместо изображений.
Как вы можете видеть из сообщения об ошибке, в нем говорится, что маршрут в настоящее время недоступен. Очевидно, это не то, чего я хотел, поэтому я попытался исправить это сам.
Наконец, после долгих исследований, я нашел решение, которое, я уверен, сработает и для вас.
Это то, что вы узнаете из этой статьи о загрузке изображений в облако и связывании их с базами данных с помощью Node.js и MongoDB. .
Давайте погрузимся
Чтобы получить представление о фактической работе, вам нужно создать профиль пользователя, который включает имя, адрес электронной почты и изображение пользователя.
Предпосылки
- Thunder Client или Postman для тестирования API.
- Редактор кода.
- Все в порядке, если вы можете понять код в начальном файле.
Давайте посмотрим, как это сделать
- Получите стартовый файл.
- Откройте терминал и установите все необходимые пакеты.
✍️ Примечание Проект соответствует архитектуре REST API.
- Чтобы начать работу, вам просто нужно создать файл среды и добавить две переменные: MONGO_URI и PORT.
- Вставьте строку подключения MongoDB в MONGO_URI.
- Запустим сервер.
В идеале вы должны получить результат, как на картинке выше.
- Теперь давайте проверим некоторые маршруты в папке маршрутов и протестируем их.
- Хорошо, теперь давайте создадим профиль пользователя.
- Первый шаг — импортировать multer в ваш основной файл для составных данных.
- Начните с создания хранилища для изображений профилей пользователей.
Код
Объяснение кода
- Назначьте папку, в которой пользовательские изображения должны храниться в первую очередь.
- Вы можете легко создать уникальное имя файла, соединив текущую дату со случайно сгенерированным числом до одного миллиарда с исходным расширением файла, как показано ниже:
«имя файла»: «1663478472266–946908179.jpg»
Создайте обработчик для составных данных
- Создайте функцию handleMultipartData.
- Используйте на нем метод мультера.
- Есть несколько вариантов, которые Multer принимает, но в вашем случае вам нужно передать конфигурацию хранилища, которую вы создали ранее, и ограничение на количество файлов.
- и предоставить один («изображение»)
- Используйте handleMultipartData в файле маршрута main.js.
Полный код
Время протестировать вашу установку.
В клиенте Thunder откройте маршрут создания пользователя и введите имя пользователя и адрес электронной почты с профилем.
- Кроме того, вы не найдете файлов в папке для загрузки.
- Давайте отправим запрос и надеемся, что все работает нормально.
- Сервер ответил данными Пользователя и Файла.
- Вы также можете заметить, что папка загрузки больше не пуста.
- Все работает нормально.
- Теперь вы можете загружать изображения User на сервер.
Загрузка изображения в облако
- Давайте перейдем ко второму шагу, где вы загрузите свое изображение в облако.
- Для таких проектов я рекомендую использовать Cloudinary, бесплатный облачный сервис, который работает достаточно хорошо.
Вот шаги, которые вам нужно выполнить
- Создайте учетную запись Cloudinary.
- После того, как вы создали свою учетную запись, пришло время настроить веб-приложение.
- Нажмите «Настроить SDK».
- Выберите параметр Node.js.
- Скопируйте ключи.
- Перейдите к созданию пользовательского маршрута в файле main.js.
- Я настоятельно рекомендую вам сохранить эти ключевые значения в вашем файле среды.
Ладно, напишем код, а потом запустим.
Код
Объяснение кода
- Код просто возвращается, если filePath не определен.
- Укажите filePath в методе cloudinary.v2.uploader.upload.
Давайте посмотрим, был ли ваш файл успешно загружен в облако.
- Это здорово, что у нас есть результаты.
- На изображении выше вы можете увидеть ссылку на загруженный файл, а также данные пользователя.
- Теперь нажмите на ссылку изображения, чтобы открыть изображение.
- Отлично, изображение успешно загружено в облако.
Полный код
Связывание изображения с базой данных
- Откройте user.js в папке моделей и проверьте схему пользователя.
- Как видите, пользовательская схема уже создана. Вы можете настроить его в соответствии с вашими требованиями.
Создать пользовательский документ
- Идите и создайте новую базу данных.
- Импортируйте файл user.js в файл main.js.
Объяснение кода
- Строка 57 — деконструировано имя и адрес электронной почты из req. тело.
- Строка 61 — ожидание и создание пользователя методом User.create().
- Строка 62 и 63. Передайте имя и адрес электронной почты в метод создания.
- Строка 64 — параметру изображения назначьте безопасный URL-адрес облачного изображения.
⌛ Пришло время загрузить пользовательские данные в базу данных.
- Выше вы можете видеть, что ваш облачный образ и база данных были успешно связаны.
- Вы можете убедиться, нажав на ссылку изображения, оно готово для доступа.
- Вы также можете проверить свою базу данных.
Заключение
С помощью этой новой функции вы можете без особых усилий загружать изображения со своего компьютера в облако, благодаря чему ваше приложение Node.js будет работать быстрее и эффективнее, чем когда-либо прежде.
По любым вопросам и предложениям обращайтесь ко мне в мой Twitter ✌🏻
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord . Заинтересованы в хакинге роста? Ознакомьтесь с разделом Схема.
