Приложение с полным стеком, имеющее дело с публичными взаимодействиями или созданием профилей пользователей, обычно сталкивается с проблемой хранения изображений или изображений профилей пользователей в базе данных. Конечно, вы можете разбить изображение на байты или биты и т. д. и сохранить то же самое, но это ужасная практика и слишком сложная на практике.Другой способ сделать это — загрузить изображение на сервер или в папку, создав общедоступный URL-адрес для загрузки оттуда и сохранив этот URL-адрес в базе данных.

Для этого нам нужен сторонний или внутренний сервер или аналогичные службы, которые могут хранить наши изображения и делать все необходимое. Облачные сервисы, такие как GCP, AWS и т. д., предоставляют нам эту услугу, но они обычно дороги и имеют мало места для хранения в бесплатной версии. Альтернативой этим службам являются сторонние поставщики, такие как CloudConvert, Cloudimage и т. д. Одной из таких альтернатив является Cloudinary, которая предоставляет достаточно места для хранения почти 25 ГБ в бесплатном плане и многие другие услуги.

ИСПОЛЬЗОВАНИЕ ОБЛАКА

Использование Cloudinary включает в себя 3 основных шага:

  1. Создание учетной записи на Cloudinary.
  2. Настраиваем систему и SDK, который хотим использовать.
  3. Делаем запрос к Cloudinary API и извлекаем необходимое.
  4. Создать учетную запись в Cloudinary так же просто, как создать учетную запись в Gmail. Тапайте по ссылке и делайте необходимое.
  5. Здесь мы будем использовать Javascript или эталонные JS-фреймворки для нашего использования. Cloudinary поддерживает многие другие фреймворки и SDK, а также очень просты в использовании. Теперь, чтобы настроить среду, нам нужно:

A. модули npm, которые можно легко загрузить, выполнив npm init — y (двойной дефис y).

B. Пакеты Cloudinary (или зависимости), которые можно загрузить, выполнив npm install cloudinary-core — save (сохранить с двойным дефисом).

C. Экспресс-сервер или узел js. Здесь мы будем использовать экспресс-сервер, поэтому npm install express — save (сохранение с двойным дефисом).

D. Кроме того, нам понадобится предустановка (которая является ключом), которая доступна по адресу: Настройки > Загрузить > Загрузить предустановки > Разрешить неподписанную загрузку. Здесь будет сгенерирован ключ, скопируйте и вставьте его, так как он нам понадобится через некоторое время.

3. Запросы к сервису Cloudinary можно сделать двумя способами:

→ Создание кнопки/виджета для загрузки файла, используя Axioms для перехода по URL-адресу https://api.cloudinary.com/v1_1/your-cloud-url/image/upload и извлечения secure_url из сгенерированный объект результата. В secure_url будет наше изображение и URL-адрес. Далее этот secure_url можно сохранить в базе данных и использовать дальше.

→ Второй способ — использовать виджет, который Cloudinary предоставляет по умолчанию. Этот виджет по умолчанию имеет множество интеграций со сторонними приложениями, такими как Instagram, Facebook, Dropbox и т. д.

Любой способ работает нормально, это просто вопрос предпочтений и возможности. Здесь мы будем использовать последний метод, и код для него будет таким:

  • Это код HTML-файла, поэтому, естественно, создайте HTML-файл, например index.html, и напишите туда код.
  • Первая строка создает простую кнопку. Мы можем применить к нему bootstrap или любой другой пользовательский стиль. Вторая строка связывает Cloudinary API с нашим файлом.
  • При нажатии кнопки вызывается mywidget.open(), который в основном представляет собой метод, запускаемый прослушивателем событий.
  • Внутри метода у нас есть сведения об облаке (скопируйте скопированный выше ключ в UploadPreset) вместе с методом createUploadWidget, поля которого не требуют пояснений и которые просты для понимания.

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

Приведенный выше экспресс-код должен находиться в отдельном файле, и мы можем запустить его, набрав node filename.js. Теперь, нажав http://localhost:8081, мы можем получить желаемый результат.

Экраны будут выглядеть так: -

После загрузки файла мы можем получить наш URL в консоли.

Обратите внимание: -

  1. Помните, что вы делаете неподписанный пресетный ключ. Это очень небезопасный и ненадежный способ использования этого API, поскольку любой, у кого есть этот пресет, может загружать файлы в наше хранилище Cloudinary. Так что продолжайте менять это и никогда не оставляйте это на переднем крае. Вместо этого используйте переменные среды или любой другой безопасный способ. Эта статья предназначена для простого использования API и, следовательно, не фокусируется на аспектах безопасности.
  2. Очень сложные HTML-файлы со сложными кодами CSS могут не обрабатываться с помощью экспресс-сервера. Поскольку эта статья предназначена для простого использования API, она не фокусируется на этом аспекте. Но лучше попытаться устранить любые ошибки, которые могут возникнуть (если они есть), или подумать об использовании аксиом или любого другого способа рендеринга сложного CSS.

НАКОНЕЦ, в этой статье показан альтернативный способ использования вышеупомянутого API. Есть много других способов использовать то же самое, поэтому не стесняйтесь читать документацию и пробовать другие настройки и способы.

Спасибо за чтение! Надеюсь, эта статья помогла.