Kako gostiti slikovne datoteke na Cloudinary v aplikaciji React

Številne aplikacije so glede vsebine odvisne od spleta. Z gostovanjem slikovnih sredstev na platformi v oblaku drugega proizvajalca lahko zagotovite, da imajo vaše aplikacije hiter in učinkovit dostop do njih.

Poleg tega se boste izognili stroškom shranjevanja in pasovne širine, ki bi jih imeli pri gostovanju sredstev z uporabo lokalnih strežnikov. Zato so rešitve v oblaku za gostovanje slik, kot je Cloudinary, postale vse bolj priljubljene.

Sledite, če želite izvedeti, kako uporabljati Cloudinary za gostovanje vaših slikovnih sredstev.

Kaj je gostovanje slik in zakaj je pomembno?

Gostovanje slik je vrsta storitve spletnega gostovanja, ki vam omogoča shranjevanje in dostop do vaših slikovnih sredstev ali drugih digitalnih medijev na platformi v oblaku tretje osebe.

Medijska sredstva, kot so slike, so bistvena pri ustvarjanju odlične uporabniške izkušnje za katero koli spletno aplikacijo. Storitve gostovanja slik vam olajšajo nalaganje, shranjevanje, pridobivanje in upravljanje vaših sredstev iz oblaka, posledično izboljša učinkovitost vaše aplikacije z zagotavljanjem hitrejšega nalaganja in boljše slike kakovosti.

Kaj je Cloudinary?

Cloudinary je platforma za upravljanje medijev v oblaku. Ponuja funkcije, ki vam olajšajo nalaganje, shranjevanje in upravljanje digitalnih medijskih sredstev, kot so slike in videoposnetki. V bistvu Cloudinary olajša upravljanje vseh vaših digitalnih medijev, potrebnih za katero koli aplikacijo, z ene platforme.

Nastavite Cloudinary Project za gostovanje slikovnih datotek

Če želite začeti nalagati in gostiti slikovne datoteke, se prijavite za a Oblačno račun.

Prijavite se na nadzorno ploščo svojega računa in kliknite zavihek ikone nastavitev v levem podoknu menija.

Na strani z nastavitvami kliknite na Naloži gumb za odpiranje strani z nastavitvami nalaganja.

Zdaj pa pojdite na Naloži prednastavitve razdelek z nastavitvami in kliknite Dodajte prednastavitev za nalaganje da ustvarite novo prednastavitev za nalaganje za svojo aplikacijo.

Prednastavitev za nalaganje je konfiguracija parametrov, ki določajo privzeto strukturo katere koli medijske datoteke, ki jo naložite v Cloudinary. Omogočajo vam, da določite niz pravil, ki se uporabijo vsakič, ko naložite predstavnostno datoteko.

Prednastavljeni parametri zagotavljajo, da Cloudinary optimizira vse predstavnostne datoteke za dostavo v vašo aplikacijo, izboljša zmogljivost in skrajša čas nalaganja.

Vnesite ime prednastavitve in izberite nepodpisan način iz prikazanega spustnega menija. Načini podpisovanja vam omogočajo, da določite metode, ki jih Cloudinary uporablja za preverjanje pristnosti in avtorizacijo nalaganja predstavnosti.

Izbira nepodpisanega načina vam bo omogočila nalaganje v shrambo Cloudinary iz vaših aplikacij brez preverjanja pristnosti s Cloudinary. Preprosto povedano, ta način vam omogoča, da izberete sliko in jo naložite neposredno iz svoje aplikacije. Cloudinary ga bo nato dostavil na zahtevo.

Ko naredite te spremembe, nadaljujte in kliknite Shrani da ustvarite prednastavitev za nalaganje.

Ustvarite aplikacijo Demo React

Nastavite lahko preprosto aplikacijo React za upravljanje funkcije nalaganja z uporabo končne točke Cloudinary API in pripomočka za nalaganje.

Za začetek, ustvarite demo aplikacijo React. Nato zaženite spodnji ukaz, da zavrtite razvojni strežnik in se pomaknite do njega http://localhost: 3000 v brskalniku za ogled rezultatov.

npm začetek

Nato zaženite ta ukaz, da namestite Axios, knjižnico JavaScript, ki se uporablja za izdelavo zahtev HTTP iz brskalnika.

npm namestite axios

Nalaganje slikovnih datotek z uporabo končne točke Cloudinary API

Po nastavitvi aplikacije React ustvarite komponento za nalaganje, ki pošlje zahtevo POST končni točki API Cloudinary za nalaganje slikovnih datotek v shrambo v oblaku Cloudinary. Nato boste uničili odgovor API-ja za prikaz naložene slike.

Ustvarite komponento za nalaganje

V imeniku /src ustvarite novo mapo in jo poimenujte komponente. V tej mapi ustvarite novo datoteko Upload.js.

V datoteko Upload.js dodajte spodnjo kodo:

uvoz Odziv, {useState} od'reagirati';
uvoz Axios od"aksios";
funkcijoNaloži() {
konst [uploadFile, setUploadFile] = useState("");
konst [cloudinaryImage, setCloudinaryImage] = useState("")
konst handleUpload = (e) => {
 e.preventDefault();
konst formData = novo FormData ();
 formData.append("mapa", naloži datoteko);
 formData.append("upload_preset", "vaše prednastavljeno ime za nalaganje");
 Axios.post(
" https://api.cloudinary.com/v1_1/your Cloudinary oblak ime/slika/nalaganje",
 formData
 )
 .potem((odgovor) => {
konzola.log (odziv);
 setCloudinaryImage (response.data.secure_url);
 })
 .catch((napaka) => {
konzola.log (napaka);
 });
 };
vrnitev ( 
"Aplikacija"> 
"leva stran"> 


 Naložite slike v Cloudinary Cloud Storage</h3>


"mapa"
 onChange ={(event) => {setUploadFile (event.target.files[0]);}} 
 />
 </div>
 Naloži datoteko</button>
 </form> 
 </section>
"desna stran">
Nastala slika bo prikazana tukaj</h3>
 {cloudinaryImage && ( <imgsrc={cloudinaryImage} /> )}
 </section>
 </div>
 );
} 
izvozprivzeto nalaganje;

Koda za nalaganje naredi naslednje:

• Razglasi dve državi, naloži datoteko in cloudinaryImage. Uporablja jih za shranjevanje naložene datoteke in nastale slike iz Cloudinary.
• Vnosno polje vam omogoča, da izberete slikovno datoteko iz datotečnega sistema vašega računalnika. Ko izberete datoteko, posodobi vrednost spremenljivke uploadFile.
• The handleUpload funkcija uporablja Axios za pošiljanje zahteve za objavo v Cloudinary. Prenese naloženo datoteko in prednastavitev za nalaganje, ki ste jo povezali s svojim računom v oblaku Cloudinary. Klik na gumb za pošiljanje prikliče to funkcijo.
• Ko koda prejme odgovor, shrani varni_url Oblačne slike v stanju.
• Na koncu upodobi dva razdelka, enega za nalaganje datoteke in drugega za prikaz nastale slike.

Uvozite in upodobite komponento upload.js v datoteki app.js. Ko izberete in naložite slikovno datoteko, bi morali v brskalniku videti podoben odgovor:

Pojdite na svoj račun Cloudinary in kliknite na Medijska knjižnica za ogled naložene datoteke.

Integracija pripomočka Cloudinary v vašo aplikacijo React znatno poenostavi postopek nalaganja. Poleg tega gradnik omogoča nalaganje slikovnih datotek iz različnih virov, kot je Dropbox.

Če želite integrirati gradnik v vašo aplikacijo React, morate najprej vključiti oddaljeno knjižnico JavaScript gradnika v datoteko index.html v imeniku /public. Dodajte oznako skripta spodaj v razdelek glave v datoteki index.html.

<scenarijsrc=" https://upload-widget.cloudinary.com/global/all.js"
 type="text/javascript">scenarij>

Nato v datoteko upload.js dodajte naslednje spremembe:

• Uvozite naslednje React kljuke: useEffect in useRef.

  uvoz {useState, useEffect, useRef} od'reagirati';

• Dodajte spodnjo kodo:

  konst cloudinaryRef = useRef();
  konst widgetRef = useRef();
   useEffect(() => {
   cloudinaryRef.current = okno.oblačno;
   widgetRef.current = cloudinaryRef.current.createUploadWidget({
   ime oblaka: 'vaše ime oblačnega oblaka', 
   uploadPreset: 'prednastavljeno ime za nalaganje'
   }, (napaka, rezultat) => { 
  konzola.log (napaka, rezultat)
   });
   }, []);

  Zgornja koda ustvari sklic na objekt Cloudinary in pripomoček za nalaganje s pomočjo kljuke useRef. Kavelj useEffect zažene kodo znotraj povratnega klica enkrat, ko se komponenta namesti. Nato inicializirate gradnik z imenom svojega oblaka in naložite prednastavljeno ime ter zabeležite rezultate in napake, ki se lahko pojavijo v gradniku.
• Na koncu ustvarite gumb, ki bo ob kliku priklical in odprl gradnik za nalaganje.

   widgetRef.current.open()} >
   Nalaganje prek pripomočka
  </button>

Kako kar najbolje izkoristiti Cloudinary

Cloudinary ponuja uporabniku prijazno rešitev, ki poenostavi postopek upravljanja slikovnih datotek in drugih medijskih sredstev.

Poleg zagotavljanja platforme za shranjevanje v oblaku ponuja Cloudinary tudi funkcije, kot so transformacije slik in optimizacija slik. To so bistvena orodja za izboljšanje kakovosti vaših medijskih sredstev.