При разработке приложений, в которые пользователи загружают изображения, мы, как разработчики, можем столкнуться с несколькими проблемами, которые необходимо решить. Во-первых, попросить пользователя сделать дополнительный шаг, попросив его покинуть наш сайт и найти другой сайт для размещения своих изображений, а затем вернуться с URL-адресом для ввода, может быть обременительным для них, и мы можем представить, что они быстро потеряют интерес к возвращению. . Во-вторых, чем больше становятся наши приложения и чем больше трафика мы приветствуем (ура, пользователи!), Тем больше места в памяти мы занимаем в базе данных наших серверов для хранения всех этих загрузок. Для хранения изображений в таблицах базы данных серверы должны обрабатывать огромные объемы данных. Это бремя быстро превращается в более медленные программы, а затем снова в потерю клиентов, потому что кто хочет дождаться медленной загрузки приложений!

Использование Cloudinary для загрузки изображений и видео и управления ими напрямую через наши приложения - это выигрышное решение. Cloudinary предоставляет облачные службы управления мультимедиа, которые даже предлагают возможность манипулировать изображениями и видео, если вам потребуются эти функции для вашей программы.

В этой статье будут разбиты все этапы процесса: регистрация в Cloudinary, настройка гема в серверной части, установка пакета во внешнем приложении, синхронизация всех этих компонентов вместе, что упрощает процесс загрузки фотографий для ваших пользователей. свои компьютеры в ваше приложение.

В этом пошаговом руководстве я буду использовать бэкэнд Ruby on Rails с выбранной базой данных и Frontend React JS (Javascript). Обратите внимание: если вам нужна дополнительная информация, у Cloudinary есть отличный источник документации по установке и использованию здесь: https://cloudinary.com/documentation

  1. Начните с регистрации бесплатной учетной записи Cloudinary: https://cloudinary.com/
  2. Как только ваша учетная запись будет настроена и вы войдете в систему, вы увидите, что ваши CloudName, API Key и Secret уже настроены для вас и находятся на вашей панели управления. Справа от «Сведения об учетной записи» на панели управления вам нужно будет загрузить файл «YML». Установите этот файл в свое приложение Rails прямо в папку Config.
  3. Включите: [gem ‘cloudinary’] в ваш Gemfile, а затем запустите [bundle install] в вашем терминале. Ruby on Rails / Cloudinary SDK: https://cloudinary.com/documentation/rails_integration
  4. Следующий шаг в бэкэнде: в вашем модельном контроллере (например, user # controller) настройте настраиваемое действие, например: «image_upload». это действие контроллера должно в конечном итоге найти пользователя, для которого нужно сохранить изображение, связаться с гемом Cloudinary, установить изображение для пользователя и сохранить его. А пока давайте просто настроим действие с помощью «byebug», чтобы мы могли видеть параметры, которые поступают из нашего интерфейса.

5. В config / routes.rb настройте свой собственный маршрут:

Теперь давайте немного поработаем над интерфейсом: в своем внешнем терминале запустите [npm i cloudinary] (подробнее о пакете узла здесь: https://www.npmjs.com/package/cloudinary)

6. В назначенном файле компонентов внешнего интерфейса по вашему выбору (например, avatar_component) настройте компонент класса React, который имеет доступ к реквизитам (которые включают нашего пользователя (и вместе с ним наши пользовательские атрибуты / пользовательские реквизиты)). Вам нужно будет импортировать React и все необходимые компоненты из Cloudinary-React. Задайте состояние для атрибута изображения для запуска пустого объекта. Вам также необходимо включить функции onChange и onSubmit для вашей формы, которые будут частью состояния возврата в функции рендеринга этого компонента. Пожалуйста, см. React / Cloudinary SDK для получения дополнительной информации: https://cloudinary.com/documentation/react_integration - - Пример:

7. В моем примере изображения вы заметите, что у меня есть console.logs только во втором .then в моей цепочке, а также в .catch. Я делаю это, когда создаю программу, чтобы увидеть, как мои данные возвращаются из серверной части в интерфейсную. Рекомендуется начать здесь, а затем использовать возвращаемые данные, относящиеся к вашей собственной программе и функциональным возможностям, на которые вы надеетесь.

8. Вам также понадобится функция render () в этом компоненте, которая возвращает блок из двух блоков: 1. Форма и 2. Изображение. Пример:

8. Для ввода вашей формы требуется тип «файл» и он должен принимать «image / *» (все изображения). ИСПРАВЛЕНИЕ в ИЗОБРАЖЕНИИ: class = "form" на самом деле должно быть classNAME = "form" (для правильного именования тегов React).

9. Отойдя от старого тега ‹img›, вы настроите вызов компонента ‹Image /›, который мы унаследовали от cloudinary-react. Вам нужно будет обновить это в соответствии с вашей собственной программой и тем, как вы обрабатываете данные, возвращаемые из выборки. Вы должны иметь возможность использовать ответ выборки для рендеринга изображения непосредственно в этом элементе. PublicId - это атрибут, включенный в наши данные, который мы отправим обратно из серверной части с выборкой. Cloud_name будет заменено на ваше собственное имя облака из Cloudinary.

10. Я также оставил немного кода (закомментированный в приведенном выше примере), чтобы показать, как потенциально использовать функции Cloudinary Image и Transform, которые поставляются вместе с первоначально установленным пакетом узла. Для получения дополнительной информации здесь: https://cloudinary.com/documentation/react_image_manipulation

11. Вернемся к нашей задней части. Из вашего прощального сообщения вызовите params. Вам нужно будет выяснить, как именно использовать параметры в соответствии с вашей собственной настройкой модели / атрибута. Пример того, как будет выглядеть наше действие:

12. Из побочной ошибки в строке 7 выясните, какой у вас «file_url», он должен содержать совершенно новый набор параметров, которые мы унаследовали от Cloudinary, одним из которых является «public_id». Установите этот public_id в свой атрибут user.image (или ваш конкретный атрибут в соответствии с программой), это данные, которые будут отправлены на ваш фронт в (рендеринг json), и то, что вам нужно будет включить в свой div изображения при рендеринге как PublicId = {this.state.image} (например, но опять же, программный код)

Это просто базовая загрузка изображений, доступная через Cloudinary. Cloudinary обладает невероятным количеством других функций, которые обязательно стоит попробовать всем! Не забывайте, что все вышеперечисленные шаги необходимо изменить в соответствии с вашей собственной программой / кодом. Приветствуются любые сообщения об обновлениях или исправлениях! Удачного кодирования!