Čitatelji poput vas podržavaju MUO. Kada kupite putem poveznica na našoj stranici, možemo zaraditi partnersku proviziju. Čitaj više.

Sadržaj mnogih aplikacija ovisi o webu. Postavljanjem slikovnih sredstava na platformu u oblaku treće strane, možete osigurati da vaše aplikacije imaju brz i učinkovit pristup njima.

Štoviše, izbjeći ćete troškove pohrane i propusnosti koje biste imali za hosting imovine pomoću lokalnih poslužitelja. Zbog toga su rješenja u oblaku za smještaj slika poput Cloudinaryja postala sve popularnija.

Pratite kako biste naučili kako koristiti Cloudinary za hostiranje svojih slikovnih materijala.

Što je hosting slika i zašto je važan?

Hosting slika vrsta je usluge web hostinga koja vam omogućuje pohranu i pristup vašim slikovnim materijalima ili drugim digitalnim medijima na platformi u oblaku treće strane.

Medijska sredstva kao što su slike bitna su za stvaranje izvrsnog korisničkog iskustva za bilo koju web aplikaciju. Usluge hostinga slika olakšavaju vam prijenos, pohranjivanje, dohvaćanje i upravljanje vašim sredstvima iz oblaka, posljedično, poboljšavajući performanse vaše aplikacije osiguravajući brže vrijeme učitavanja i bolju sliku kvaliteta.

instagram viewer

Što je Cloudinary?

Cloudinary je platforma za upravljanje medijima temeljena na oblaku. Pruža značajke koje vam olakšavaju prijenos, pohranu i upravljanje digitalnim medijskim sredstvima kao što su slike i videozapisi. U biti, Cloudinary olakšava upravljanje svim vašim digitalnim medijima potrebnim za bilo koju aplikaciju s jedne platforme.

Postavite Cloudinary projekt za smještaj slikovnih datoteka

Da biste započeli s učitavanjem i hostingom slikovnih datoteka, prijavite se za a Oblačno račun.

Prijavite se na nadzornu ploču svog računa i kliknite karticu ikone postavki u lijevom oknu izbornika.

Na stranici postavki kliknite na Učitaj gumb za otvaranje stranice postavki prijenosa.

Sada prijeđite na Prenesi unaprijed postavljene postavke odjeljak postavki i kliknite na Dodajte unaprijed postavljenu postavku za prijenos za stvaranje nove postavke za prijenos za vašu aplikaciju.

Unaprijed postavka za prijenos je konfiguracija parametara koji definiraju zadanu strukturu bilo koje medijske datoteke koju prenesete na Cloudinary. Omogućuju vam definiranje skupa pravila koja se primjenjuju svaki put kada učitate medijsku datoteku.

Unaprijed postavljeni parametri osiguravaju da Cloudinary optimizira sve medijske datoteke za isporuku vašoj aplikaciji, poboljšavajući performanse i smanjujući vrijeme učitavanja.

Unesite naziv svoje unaprijed postavljene postavke i odaberite nepotpisan modu iz prikazanog padajućeg izbornika. Načini potpisivanja omogućuju vam da odredite metode koje Cloudinary koristi za provjeru autentičnosti i autorizaciju prijenosa medija.

Odabir nepotpisanog načina rada omogućit će vam prijenose na vašu Cloudinary pohranu iz vaših aplikacija bez autentifikacije s Cloudinaryjem. Jednostavno rečeno, ovaj način vam omogućuje da odaberete sliku i prenesete je izravno iz svoje aplikacije. Cloudinary će ga zatim isporučiti na zahtjev.

Nakon što izvršite te promjene, samo naprijed i kliknite Uštedjeti za izradu unaprijed postavljenih postavki za prijenos.

Napravite Demo React aplikaciju

Možete postaviti jednostavnu React aplikaciju za rukovanje funkcijom prijenosa pomoću krajnje točke Cloudinary API i widgeta za prijenos.

Započeti, izraditi demo React aplikaciju. Zatim pokrenite donju naredbu da pokrenete razvojni poslužitelj i dođite do njega http://localhost: 3000 na vašem pregledniku da vidite rezultate.

npm početak

Zatim pokrenite ovu naredbu da instalirate Axios, JavaScript biblioteku koja se koristi za izradu HTTP zahtjeva iz preglednika.

npm instalirati axios

Učitajte slikovne datoteke koristeći krajnju točku Cloudinary API-ja

Nakon postavljanja aplikacije React, izradite komponentu za učitavanje koja šalje POST zahtjev Cloudinary API krajnjoj točki za učitavanje slikovnih datoteka na Cloudinary pohranu u oblaku. Zatim ćete destrukturirati odgovor API-ja da biste prikazali učitanu sliku.

Stvorite komponentu za prijenos

U direktoriju /src stvorite novu mapu i nazovite je komponente. U ovoj mapi stvorite novu datoteku, Upload.js.

U datoteku Upload.js dodajte kod u nastavku:

uvoz Reagiraj, {useState} iz'reagirati';
uvoz Axios iz"aksios";
funkcijaUčitaj() {
konst [uploadFile, setUploadFile] = useState("");
konst [cloudinaryImage, setCloudinaryImage] = useState("")


konst handleUpload = (e) => {
 e.preventDefault();
konst obrazacData = novi Podaci obrasca ();
 formData.append("datoteka", uploadFile);
 formData.append("upload_preset", "vaš unaprijed postavljen naziv za prijenos");


 Axios.post(
" https://api.cloudinary.com/v1_1/your Cloudinary cloud naziv/slika/upload",
 obrazacData
 )
 .zatim((odgovor) => {
konzola.log (odgovor);
 setCloudinaryImage (response.data.secure_url);
 })
 .ulov((greška) => {
konzola.log (greška);
 });
 };
povratak ( 
"Aplikacija"> 
"lijeva strana"> 


 Prenesite slike u Cloudinary Cloud Storage</h3>


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

Evo što kod za prijenos radi:

  • Proglašava dvije države, uploadFile i cloudinaryImage. Koristi ih za pohranjivanje učitane datoteke i rezultirajuće slike iz Cloudinaryja.
  • Polje za unos omogućuje vam odabir slikovne datoteke iz datotečnog sustava vašeg stroja. Kada odaberete datoteku, ona ažurira vrijednost varijable uploadFile.
  • The handleUpload funkcija koristi Axios za slanje zahtjeva za objavu Cloudinaryju. Prolazi u učitanu datoteku i unaprijed postavljenu postavku za učitavanje koju ste povezali sa svojim Cloudinary računom u oblaku. Klikom na gumb za slanje poziva se ova funkcija.
  • Kada kod primi odgovor, pohranjuje siguran_url slike Cloudinary u stanju.
  • Konačno, renderira dva odjeljka, jedan za učitavanje datoteke i drugi za prikaz rezultirajuće slike.

Uvezite i renderirajte upload.js komponentu u svoju app.js datoteku. Trebali biste vidjeti ovakav odgovor u svom pregledniku nakon što odaberete i prenesete slikovnu datoteku:

Idite na svoj Cloudinary račun i kliknite na Mediateka za pregled učitane datoteke.

Integracija Cloudinary widgeta u vašu React aplikaciju značajno pojednostavljuje proces učitavanja. Osim toga, widget vam omogućuje učitavanje slikovnih datoteka iz različitih izvora, kao što je Dropbox.

Da biste integrirali widget u svoju aplikaciju React, prvo morate uključiti udaljenu JavaScript biblioteku widgeta u svoju datoteku index.html u /public direktoriju. Dodajte oznaku skripte ispod u odjeljak zaglavlje u vašoj datoteci index.html.

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

Zatim u datoteci upload.js dodajte sljedeće promjene:

  • Uvezite sljedeće Reagirajte kuke: useEffect i useRef. 
    uvoz {useState, useEffect, useRef} iz'reagirati';
  • Dodajte kod u nastavku: 
    konst cloudinaryRef = useRef();
    konst widgetRef = useRef();
     useEffect(() => {
     cloudinaryRef.current = prozor.oblačno;
     widgetRef.current = cloudinaryRef.current.createUploadWidget({
     ime oblaka: 'vaše ime oblaka', 
     uploadPreset: 'unaprijed postavljeni naziv za prijenos'
     }, (greška, rezultat) => { 
    konzola.log (pogreška, rezultat)
     });
     }, []);
    Gornji kod stvara referencu na Cloudinary objekt i widget za učitavanje pomoću kuke useRef. UseEffect kuka pokreće kod unutar povratnog poziva jednom kada se komponenta montira. Zatim inicijalizirate widget koristeći svoj naziv oblaka i učitavate unaprijed postavljeni naziv te bilježite rezultate i pogreške koje se mogu pojaviti iz widgeta.
  • Na kraju, stvorite gumb koji će, kada se klikne, pozvati i otvoriti widget za učitavanje.

Izvucite maksimum iz Cloudinaryja

Cloudinary pruža korisniku prilagođeno rješenje koje pojednostavljuje proces upravljanja slikovnim datotekama i drugom medijskom imovinom.

Osim što pruža platformu za pohranu u oblaku, Cloudinary također nudi značajke kao što su transformacije slike i optimizacija slike. Ovo su osnovni alati za poboljšanje kvalitete vaših medijskih sredstava.