Cloudinary — один из лучших бесплатных вариантов для хранения наших изображений. В настоящее время они дают 25 кредитов в месяц, а 1 кредит равен 1000 преобразований или 1 ГБ памяти или 1 ГБ пропускной способности, что довольно хорошо. Этих щедрых цифр Cloudinary более чем достаточно для небольшого приложения и хобби-проектов. Так что, если вы ищете бесплатного поставщика изображений, я могу сказать, что вы сорвали джекпот. Теперь давайте посмотрим, как подключить Cloudinary к Strapi:

  • Зайдите на cloudinary.com и зарегистрируйтесь.
  • После успешной регистрации перейдите на вкладку «Панель инструментов».
  • Нам нужны 3 вещи с этой страницы; имя облака, ключ API и секрет API. Так что не закрывайте эту страницу.
  • Теперь пришло время открыть ваш проект Strapi (если ваш проект уже запущен на локальном хосте, остановите его, а затем выполните следующие шаги).
  • Перейдите к файлу .env и добавьте имя своего облака, ключ API и секрет API, например:
CLOUDINARY_NAME=YOUR_CLOUD_NAME
CLOUDINARY_KEY=YOUR_CLOUD_KEY
CLOUDINARY_SECRET=YOUR_CLOUD_SECRET
  • Добавьте этот пакет в свой проект, написав: (если вы хотите использовать ту же версию со мной, пропустите это и продолжите со следующего шага)
npm i @strapi/provider-upload-cloudinary
or
yarn add @strapi/provider-upload-cloudinary
  • Если вы хотите использовать ту же версию этого пакета, которую я использую для этого урока, вы можете просто написать:
npm i @strapi/[email protected]
or
yarn add @strapi/[email protected]

ВАЖНО: будьте очень осторожны при установке этого пакета, потому что существует также пакет под названием «strapi/provider-upload-cloudinary», который нам не нужно устанавливать, нам нужен только «@strapi/provider». -upload-cloudinary» (в начале должен быть @).

  • Откройте свой код Strapi, в папке config создайте новый файл с именем plugins.js и вставьте этот код (этот код помогает нам выполнить настройку поставщика Cloudinary):
  • Откройте файл middlewares.js в папке config и вставьте туда этот код (этот код позволяет нам избавиться от некоторых проблем с безопасностью Strapi):
  • Теперь мы готовы запустить наш проект Strapi, просто набрав: (пожалуйста, перезапустите сервер, если он уже запущен)
npm run develop
or
yarn develop
  • После добавления некоторых ресурсов в Strapi, если вы закроете веб-сайт Cloudinary, снова перейдите на cloudinary.com, а после входа в систему перейдите на вкладку Медиатека. Вы должны иметь возможность видеть разные версии изображения, которое вы загрузили в Strapi.

ВАЖНО: если вы увидели изображения в Cloudinary, это означает, что вы успешно подключили к нему свое приложение Strapi. НО это не означает, что вы сможете ссылаться на эти изображения в своих запросах. Чтобы получить данные изображения в запросе, необходимо добавить ?populate=* в конец URL-адреса запроса.

Например, если ваш запрос примерно такой:

BASE_URL/api/продукты

Вам нужно изменить свой запрос на это, чтобы получить данные изображения:

BASE_URL/api/products?populate=*

  • Наконец, когда вы загружаете 1 изображение в Strapi, вы можете увидеть разные версии этого изображения в Cloudinary, такие как маленький, средний, большой размер и т. д. Если вам не нужна такая другая версия, откройте панель инструментов Strapi и перейдите к настройкам. вкладку с левой стороны. Затем нажмите «Медиатека», которая находится под заголовком «Глобальные настройки», после чего вы можете отключить создание изображений разного размера, установив для параметра «Отзывчивый дружественный» значение false.

Вот и все! Если вас интересует моя версия Strapi, я использовал версию 4.2.0, когда писал эту статью.

Удачи вам в вашем путешествии по Strapi и Cloudinary.