Такие читатели, как вы, помогают поддерживать MUO. Когда вы совершаете покупку по ссылкам на нашем сайте, мы можем получать партнерскую комиссию. Читать далее.

Содержание многих приложений зависит от Интернета. Размещая ресурсы изображений на сторонней облачной платформе, вы можете гарантировать, что ваши приложения будут иметь к ним быстрый и эффективный доступ.

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

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

Что такое хостинг изображений и почему это важно?

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

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

instagram viewer

Что такое облачность?

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

Настройте облачный проект для размещения файлов изображений

Чтобы начать загрузку и размещение файлов изображений, зарегистрируйтесь в Облачно счет.

Войдите в панель управления своей учетной записью и щелкните вкладку значка настроек в левой панели меню.

На странице настроек нажмите кнопку Загрузить кнопку, чтобы открыть страницу настроек загрузки.

Теперь отправляйтесь в Загрузить пресеты раздел настроек и нажмите Добавить пресет загрузки чтобы создать новый пресет загрузки для вашего приложения.

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

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

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

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

После внесения этих изменений нажмите Сохранять для создания предустановки загрузки.

Создайте демонстрационное приложение React

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

Для начала, создать демонстрационное приложение React. Затем выполните приведенную ниже команду, чтобы запустить сервер разработки и перейти к http://localhost: 3000 в браузере, чтобы просмотреть результаты.

запуск нпм

Затем запустите эту команду, чтобы установить Axios, библиотеку JavaScript, используемую для выполнения HTTP-запросов из браузера.

npm установить аксиомы

Загрузить файлы изображений с помощью Cloudinary API Endpoint

После настройки приложения React создайте компонент загрузки, который отправляет запрос POST к конечной точке API Cloudinary для загрузки файлов изображений в облачное хранилище Cloudinary. Затем вы деструктурируете ответ API, чтобы отобразить загруженное изображение.

Создайте компонент загрузки

В каталоге /src создайте новую папку и назовите ее компоненты. В этой папке создайте новый файл Upload.js.

В файл Upload.js добавьте следующий код:

Импортировать Реагируйте, {useState} от«реагировать»;
Импортировать Аксиос от"аксиос";
функцияЗагрузить() {
константа [uploadFile, setUploadFile] = useState("");
константа [cloudinaryImage, setCloudinaryImage] = useState("")


константа обработать загрузку = (е) => {
 e.preventDefault();
константа данные формы = новый Данные формы ();
 formData.append("файл", загрузить файл);
 formData.append("upload_preset", "название вашего загружаемого пресета");


 Аксиос.пост(
" https://api.cloudinary.com/v1_1/your Облачное имя/изображение/загрузка",
 formData
 )
 .затем((ответ) => {
консоль.log (ответ);
 setCloudinaryImage(response.data.secure_url);
 })
 .ловить((ошибка) => {
консоль.лог (ошибка);
 });
 };
возвращаться ( 
"Приложение"> 
"левая сторона"> 


 Загрузить изображения в Cloudinary Cloud Storage</h3>


"файл"
 onChange = {(event) => {setUploadFile (event.target.files[0]);}} 
 />
 </div>

Вот что делает код загрузки:

  • Декларирует два состояния, загрузить файл и облачныйИзображение. Он использует их для хранения загруженного файла и полученного изображения из Cloudinary.
  • Поле ввода позволяет вам выбрать файл изображения из файловой системы вашего компьютера. Когда вы выбираете файл, он обновляет значение переменной uploadFile.
  • handleЗагрузить Функция использует Axios для отправки почтового запроса в Cloudinary. Он передается в загруженный файл и пресет загрузки, который вы связали со своей облачной учетной записью Cloudinary. Нажатие кнопки отправки вызывает эту функцию.
  • Когда код получает ответ, он сохраняет secure_url Облачного образа в состоянии.
  • Наконец, он отображает два раздела: один для загрузки файла, а другой для отображения результирующего изображения.

Импортируйте и визуализируйте компонент upload.js в файле app.js. Вы должны увидеть такой ответ в своем браузере, когда выберете и загрузите файл изображения:

Перейдите в свою учетную запись Cloudinary и нажмите кнопку Медиа библиотека вкладку для просмотра загруженного файла.

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

Чтобы интегрировать виджет в ваше приложение React, сначала вам нужно включить удаленную библиотеку JavaScript виджета в ваш файл index.html в каталоге /public. Добавьте приведенный ниже тег скрипта в раздел заголовка файла index.html.

<сценарийисточник=" https://upload-widget.cloudinary.com/global/all.js"
 тип = "текст/javascript">сценарий>

Затем в файле upload.js добавьте следующие изменения:

  • Импортируйте следующее Реагировать на хуки: useEffect и useRef. 
    Импортировать {useState, useEffect, useRef} от«реагировать»;
  • Добавьте код ниже: 
    константа cloudinaryRef = useRef();
    константа виджетСсылка = useRef();
     использоватьЭффект(() => {
     cloudinaryRef.current = окнооблачный;
     widgetRef.current = cloudinaryRef.current.createUploadWidget({
     имя_облака: 'ваше облачное имя облака', 
     загрузитьПредустановка: 'название пресета для загрузки'
     }, (ошибка, результат) => { 
    консоль.log (ошибка, результат)
     });
     }, []);
    Приведенный выше код создает ссылку на объект Cloudinary и виджет загрузки с помощью хука useRef. Хук useEffect запускает код внутри обратного вызова один раз при монтировании компонента. Затем вы инициализируете виджет, используя имя вашего облака, загружаете предустановленное имя и регистрируете результаты и ошибки, которые могут возникнуть из виджета.
  • Наконец, создайте кнопку, которая при нажатии будет вызывать и открывать виджет загрузки.

Получение максимальной отдачи от Cloudinary

Cloudinary предоставляет удобное решение, которое упрощает процесс управления файлами изображений и другими медиаресурсами.

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