Читаоци попут вас помажу у подршци МУО. Када обавите куповину користећи везе на нашем сајту, можда ћемо зарадити провизију за партнере. Опширније.

Многе апликације зависе од веба због свог садржаја. Хостовањем сликовних средстава на платформи у облаку треће стране, можете осигурати да ваше апликације имају брз и ефикасан приступ њима.

Штавише, избећи ћете трошкове складиштења и пропусног опсега које бисте имали за хостовање средстава помоћу локалних сервера. Због тога су решења у облаку за хостовање слика као што је Цлоудинари постала све популарнија.

Пратите даље да бисте научили како да користите Цлоудинари за хостовање ваших сликовних средстава.

Шта је хостинг слика и зашто је важан?

Хостинг слика је врста услуге веб хостинга која вам омогућава да складиштите и приступате вашим сликама или другим дигиталним медијима на платформи у облаку треће стране.

Медијска средства као што су слике су неопходна за стварање одличног корисничког искуства за било коју веб апликацију. Услуге хостовања слика вам олакшавају отпремање, складиштење, преузимање и управљање вашим средствима из облака, последично, побољшање перформанси ваше апликације обезбеђивањем бржег времена учитавања и боље слике квалитета.

instagram viewer

Шта је Цлоудинари?

Цлоудинари је платформа за управљање медијима заснована на облаку. Пружа функције које вам олакшавају отпремање, складиштење и управљање дигиталним медијским средствима као што су слике и видео снимци. У суштини, Цлоудинари олакшава управљање свим вашим дигиталним медијима потребним за било коју апликацију са једне платформе.

Подесите Цлоудинари пројекат за хостовање датотека слика

Да бисте започели са отпремањем и хостовањем датотека слика, пријавите се за а Цлоудинари рачун.

Пријавите се на контролну таблу свог налога и кликните на картицу са иконом подешавања у левом окну менија.

На страници са подешавањима кликните на Отпремити дугме да бисте отворили страницу са подешавањима отпремања.

Сада, идите на Отпремите унапред подешене поставке одељак подешавања и кликните на Додајте унапред подешено отпремање да бисте креирали нову унапред постављену поставку за отпремање за своју апликацију.

Пресет за отпремање је конфигурација параметара који дефинишу подразумевану структуру било које медијске датотеке коју отпремите на Цлоудинари. Они вам омогућавају да дефинишете скуп правила која ће се применити сваки пут када отпремите медијску датотеку.

Унапред подешени параметри обезбеђују да Цлоудинари оптимизује све медијске датотеке за испоруку вашој апликацији, побољшавајући перформансе и смањујући време учитавања.

Унесите назив унапред подешене поставке и изаберите непотписан режим из приказаног падајућег менија. Режими потписивања вам омогућавају да одредите методе које Цлоудинари користи за аутентификацију и ауторизацију било каквог отпремања медија.

Избор непотписаног режима ће вам омогућити да отпремате у своју Цлоудинари складиште из ваших апликација без аутентификације помоћу Цлоудинари-ја. Једноставно речено, овај режим вам омогућава да изаберете слику и отпремите је директно из ваше апликације. Цлоудинари ће га тада испоручити на захтев.

Након што извршите те измене, наставите и кликните сачувати да бисте креирали унапред подешене поставке за отпремање.

Направите Демо Реацт апликацију

Можете да подесите једноставну Реацт апликацију за руковање функционалношћу отпремања помоћу крајње тачке Цлоудинари АПИ-ја и виџета за отпремање.

Започети, направите демо Реацт апликацију. Затим покрените наредбу испод да бисте покренули развојни сервер и ишли до њега http://localhost: 3000 на вашем претраживачу да бисте видели резултате.

нпм старт

Затим покрените ову команду да бисте инсталирали Акиос, ЈаваСцрипт библиотеку која се користи за прављење ХТТП захтева из претраживача.

нпм инсталл акиос

Отпремите сликовне датотеке помоћу крајње тачке Цлоудинари АПИ-ја

Након подешавања Реацт апликације, креирајте компоненту за отпремање која шаље ПОСТ захтев крајњој тачки Цлоудинари АПИ-ја за отпремање сликовних датотека у Цлоудинари складиште у облаку. Затим ћете деструктурирати АПИ одговор да бисте приказали отпремљену слику.

Направите компоненту за отпремање

У директоријуму /срц креирајте нову фасциклу и назовите је компоненте. У овој фасцикли направите нову датотеку, Уплоад.јс.

У датотеку Уплоад.јс додајте код у наставку:

увоз Реагујте, {усеСтате} из'реаговати';
увоз Акиос из"аксиос";
функцијаОтпремити() {
конст [уплоадФиле, сетУплоадФиле] = усеСтате("");
конст [цлоудинариИмаге, сетЦлоудинариИмаге] = усеСтате("")


конст хандлеУплоад = (е) => {
 е.превентДефаулт();
конст формДата = Нова ФормДата ();
 формДата.аппенд("фајл", отпреми датотеку);
 формДата.аппенд("уплоад_пресет", "ваше унапред подешено име за отпремање");


 Акиос.пост(
" https://api.cloudinary.com/v1_1/your Цлоудинари цлоуд име/слика/отпремање",
 формДата
 )
 .онда((одговор) => {
конзола.лог (одговор);
 сетЦлоудинариИмаге (респонсе.дата.сецуре_урл);
 })
 .улов((грешка) => {
конзола.лог (грешка);
 });
 };
повратак ( 
"Апликација"> 
"лева страна"> 


 Отпремите слике у Цлоудинари Цлоуд Стораге</h3>


"фајл"
 онЦханге ={(евент) => {сетУплоадФиле (евент.таргет.филес[0]);}} 
 />
 </div>

Ево шта ради код за отпремање:

  • Проглашава две државе, отпреми датотеку и цлоудинариИмаге. Користи их за чување отпремљене датотеке и резултујуће слике из Цлоудинари-ја.
  • Поље за унос вам омогућава да изаберете датотеку слике из система датотека вашег уређаја. Када изаберете датотеку, она ажурира вредност променљиве уплоадФиле.
  • Тхе хандлеУплоад функција користи Акиос да пошаље захтев за објављивање у Цлоудинари. Он прослеђује отпремљену датотеку и унапред подешене поставке за отпремање које сте повезали са својим Цлоудинари налогом у облаку. Кликом на дугме за слање позива се ова функција.
  • Када код прими одговор, он похрањује сецуре_урл Цлоудинари слике у стању.
  • Коначно, приказује два одељка, један за отпремање датотеке, а други за приказивање резултирајуће слике.

Увезите и рендерујте компоненту уплоад.јс у датотеци апп.јс. Требало би да видите овакав одговор у свом претраживачу када изаберете и отпремите датотеку слике:

Идите на свој Цлоудинари налог и кликните на Медиа Либрари картицу да видите отпремљену датотеку.

Интегрисање Цлоудинари виџета у вашу Реацт апликацију значајно поједностављује процес отпремања. Поред тога, виџет вам омогућава да отпремате сликовне датотеке из различитих извора, као што је Дропбок.

Да бисте интегрисали виџет у вашу Реацт апликацију, прво морате да укључите удаљену ЈаваСцрипт библиотеку виџета у вашу индек.хтмл датотеку у /публиц директоријуму. Додајте ознаку скрипте испод у одељку заглавља у вашој индек.хтмл датотеци.

<скриптасрц=" https://upload-widget.cloudinary.com/global/all.js"
 типе="тект/јавасцрипт">скрипта>

Затим у датотеку уплоад.јс додајте унесите следеће промене:

  • Увезите следеће Реаговати куке: усеЕффецт и усеРеф. 
    увоз {усеСтате, усеЕффецт, усеРеф} из'реаговати';
  • Додајте код испод: 
    конст цлоудинариРеф = усеРеф();
    конст видгетРеф = усеРеф();
     усеЕффецт(() => {
     цлоудинариРеф.цуррент = прозор.цлоудинари;
     видгетРеф.цуррент = цлоудинариРеф.цуррент.цреатеУплоадВидгет({
     цлоудНаме: 'твоје облачно име облака', 
     уплоадПресет: 'подешено име за отпремање'
     }, (грешка, резултат) => { 
    конзола.лог (грешка, резултат)
     });
     }, []);
    Горњи код креира референцу на објекат Цлоудинари и виџет за отпремање помоћу куке усеРеф. УсеЕффецт кука покреће код унутар повратног позива једном када се компонента монтира. Затим иницијализујете виџет користећи своје име у облаку и отпремите унапред подешено име и евидентирате резултате и грешке до којих може доћи од виџета.
  • На крају, направите дугме које ће, када се кликне, позвати и отворити виџет за отпремање.

Извлачење максимума из Цлоудинари-ја

Цлоудинари пружа решење прилагођено кориснику које поједностављује процес управљања датотекама слика и другим медијским средствима.

Осим што пружа платформу за складиштење у облаку, Цлоудинари такође нуди функције као што су трансформације слика и оптимизација слике. Ово су суштински алати за побољшање квалитета ваших медијских средстава.