Читатели като вас помагат в подкрепа на MUO. Когато правите покупка чрез връзки на нашия сайт, ние може да спечелим комисионна за партньор. Прочетете още.

Съдържанието на много приложения зависи от мрежата. Като хоствате графични активи на облачна платформа на трета страна, можете да гарантирате, че вашите приложения имат бърз и ефективен достъп до тях.

Освен това ще избегнете разходите за съхранение и честотна лента, които бихте понесли при хостване на активите с помощта на локални сървъри. Ето защо облачните решения за хостване на изображения като Cloudinary стават все по-популярни.

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

Какво е хостинг на изображения и защо е важен?

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

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

instagram viewer

Какво е Cloudinary?

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

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

За да започнете да качвате и хоствате файлове с изображения, регистрирайте се за a Облачно сметка.

Влезте в таблото за управление на вашия акаунт и щракнете върху раздела с иконата за настройки в левия панел на менюто.

На страницата с настройки щракнете върху Качване бутон, за да отворите страницата с настройки за качване.

Сега преминете към Качване на предварителни настройки раздел настройки и щракнете върху Добавете предварителна настройка за качване за да създадете нова предварителна настройка за качване за вашето приложение.

Предварителната настройка за качване е конфигурация от параметри, които определят структурата по подразбиране на всеки медиен файл, който качвате в Cloudinary. Те ви позволяват да дефинирате набор от правила, които да се прилагат всеки път, когато качвате медиен файл.

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

Попълнете името на вашата предварителна настройка и изберете неподписан режим от показаното падащо меню. Режимите на подписване ви позволяват да посочите методите, които Cloudinary използва за удостоверяване и упълномощаване на всички качени медии.

Избирането на неподписан режим ще ви позволи да извършвате качвания във вашето Cloudinary хранилище от вашите приложения, без да се удостоверявате с Cloudinary. Просто казано, този режим ви позволява да изберете изображение и да го качите директно от вашето приложение. След това Cloudinary ще го достави при поискване.

След като направите тези промени, продължете и щракнете Запазване за създаване на предварителна настройка за качване.

Създайте приложение Demo React

Можете да настроите просто приложение React, за да управлявате функционалността за качване, като използвате крайната точка на Cloudinary API и приспособлението за качване.

За да започнете, създайте демонстрационно приложение React. След това изпълнете командата по-долу, за да завъртите сървъра за разработка и отидете до него http://localhost: 3000 на вашия браузър, за да видите резултатите.

npm стартиране

След това изпълнете тази команда, за да инсталирате Axios, JavaScript библиотека, използвана за правене на HTTP заявки от браузъра.

npm инсталирайте axios

Качвайте файлове с изображения с помощта на крайна точка на Cloudinary API

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

Създайте компонент за качване

В директорията /src създайте нова папка и я наименувайте компоненти. В тази папка създайте нов файл, Upload.js.

Във файла Upload.js добавете кода по-долу:

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


конст handleUpload = (д) => {
 e.preventDefault();
конст formData = нов FormData ();
 formData.append("файл", качи файл);
 formData.append("upload_preset", "вашето предварително зададено име за качване");


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


 Качете изображения в Cloudinary Cloud Storage</h3>


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

Ето какво прави кодът за качване:

  • Обявява две държави, качи файл и cloudinaryImage. Той ги използва, за да съхранява качения файл и полученото изображение от Cloudinary.
  • Полето за въвеждане ви позволява да изберете файл с изображение от файловата система на вашето устройство. Когато изберете файл, той актуализира стойността на променливата uploadFile.
  • The handleUpload функцията използва Axios, за да направи заявка за публикация към Cloudinary. Той преминава в качения файл и предварително зададените настройки за качване, които сте свързали с вашия акаунт в облака Cloudinary. Щракването върху бутона за изпращане извиква тази функция.
  • Когато кодът получи отговор, той съхранява защитен_url на облачното изображение в състояние.
  • Накрая рендира две секции, едната за качване на файла, а другата за показване на полученото изображение.

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

Преминете към вашия акаунт в Cloudinary и щракнете върху Медийна библиотека за преглед на качения файл.

Интегрирането на приспособлението Cloudinary във вашето приложение React значително опростява процеса на качване. Освен това джаджата ви позволява да качвате файлове с изображения от различни източници, като Dropbox.

За да интегрирате джаджата във вашето приложение React, първо трябва да включите отдалечената JavaScript библиотека на джаджата във вашия файл index.html в директорията /public. Добавете маркера на скрипта по-долу в секцията head във вашия файл index.html.

<сценарийsrc=" https://upload-widget.cloudinary.com/global/all.js"
 type="text/javascript">сценарий>

След това във вашия upload.js файл добавете направете следните промени:

  • Импортирайте следното Реагирайте куките: useEffect и useRef. 
    импортиране {useState, useEffect, useRef} от"реагира";
  • Добавете кода по-долу: 
    конст cloudinaryRef = useRef();
    конст widgetRef = useRef();
     useEffect(() => {
     cloudinaryRef.current = прозорец.облачно;
     widgetRef.current = cloudinaryRef.current.createUploadWidget({
     име на облак: „вашето име на облачен облак“, 
     uploadPreset: "предварително зададеното име за качване"
     }, (грешка, резултат) => { 
    конзола.log (грешка, резултат)
     });
     }, []);
    Кодът по-горе създава препратка към обекта Cloudinary и изпълнимия модул за качване с помощта на куката useRef. Куката useEffect изпълнява кода вътре в обратното извикване веднъж, когато компонентът се монтира. След това инициализирате приспособлението, като използвате името на вашия облак и качвате предварително зададено име и регистрирате резултатите и грешките, които могат да възникнат от приспособлението.
  • Накрая създайте бутон, който при щракване ще извика и отвори изпълнимия модул за качване.

Извличане на максимума от Cloudinary

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

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