Lesere som deg er med på å støtte MUO. Når du foretar et kjøp ved å bruke lenker på nettstedet vårt, kan vi tjene en tilknyttet provisjon. Les mer.

Mange applikasjoner er avhengige av nettet for innholdet. Ved å være vert for bilderessurser på en tredjeparts skyplattform kan du sikre at appene dine har rask og effektiv tilgang til dem.

Dessuten vil du unngå lagrings- og båndbreddekostnadene du vil pådra å være vert for eiendelene ved å bruke lokale servere. Dette er grunnen til at skyløsninger for bildevert som Cloudinary har blitt stadig mer populære.

Følg med for å lære hvordan du bruker Cloudinary til å være vert for bilderessursene dine.

Hva er Image Hosting, og hvorfor er det viktig?

Bildehosting er en type webhotell som lar deg lagre og få tilgang til bildemidlene eller andre digitale medier på en tredjeparts skyplattform.

Medieressurser som bilder er avgjørende for å skape en god brukeropplevelse for enhver nettapplikasjon. Bildevertstjenester gjør det enkelt for deg å laste opp, lagre, hente og administrere eiendelene dine fra skyen, følgelig forbedre applikasjonens ytelse ved å sikre raskere lastetider og bedre bilde kvalitet.

instagram viewer

Hva er Cloudinary?

Cloudinary er en skybasert medieadministrasjonsplattform. Den har funksjoner som gjør det enkelt for deg å laste opp, lagre og administrere digitale medieressurser som bilder og videoer. I hovedsak gjør Cloudinary det enklere å administrere alle dine digitale medier som trengs for enhver applikasjon fra én plattform.

Sett opp et Cloudinary-prosjekt for å være vert for bildefiler

For å komme i gang med å laste opp og hoste bildefiler, registrer deg for en Skyet regnskap.

Logg på kontooversikten og klikk på innstillingsikonfanen i venstre menypanel.

På innstillingssiden klikker du på Laste opp knappen for å åpne siden for opplastingsinnstillinger.

Gå nå over til Last opp forhåndsinnstillinger innstillingsdelen og klikk på Legg til forhåndsinnstilling for opplasting for å opprette en ny forhåndsinnstilling for opplasting for applikasjonen din.

En forhåndsinnstilling for opplasting er en konfigurasjon av parametere som definerer standardstrukturen til enhver mediefil du laster opp på Cloudinary. De lar deg definere et sett med regler som skal gjelde hver gang du laster opp en mediefil.

De forhåndsinnstilte parameterne sikrer at Cloudinary optimerer alle mediefiler for levering til applikasjonen din, forbedrer ytelsen og reduserer lastetiden.

Fyll inn navnet på forhåndsinnstillingen og velg usignert modus fra rullegardinmenyen som vises. Signeringsmodusene lar deg spesifisere metodene Cloudinary bruker for å autentisere og autorisere eventuelle medieopplastinger.

Hvis du velger usignert modus, kan du laste opp til Cloudinary-lagringen fra programmene dine uten å autentisere med Cloudinary. Enkelt sagt lar denne modusen deg velge et bilde og laste det opp direkte fra applikasjonen din. Cloudinary vil deretter levere den på forespørsel.

Etter å ha gjort disse endringene, fortsett og klikk Lagre for å opprette forhåndsinnstillingen for opplasting.

Opprett en Demo React-applikasjon

Du kan sette opp en enkel React-applikasjon for å håndtere opplastingsfunksjonalitet ved å bruke Cloudinary API-endepunktet og opplastingswidgeten.

For å komme i gang, lag en demo React-applikasjon. Deretter kjører du kommandoen nedenfor for å spinne opp utviklingsserveren og navigere til http://localhost: 3000 på nettleseren din for å se resultatene.

npm start

Deretter kjører du denne kommandoen for å installere Axios, et JavaScript-bibliotek som brukes til å lage HTTP-forespørsler fra nettleseren.

npm installer aksioer

Last opp bildefiler ved hjelp av Cloudinary API-endepunkt

Etter å ha satt opp React-appen, lag en opplastingskomponent som sender en POST-forespørsel til Cloudinarys API-endepunkt for å laste opp bildefiler til Cloudinary skylagring. Du vil da destrukturere API-svaret for å vise det opplastede bildet.

Opprett en opplastingskomponent

I /src-katalogen, opprett en ny mappe og navngi den, komponenter. I denne mappen oppretter du en ny fil, Upload.js.

I Upload.js-filen legger du til koden nedenfor:

import Reager, {useState} fra'reagere';
import Axios fra"aksios";
funksjonLaste opp() {
konst [uploadFile, setUploadFile] = useState("");
konst [cloudinaryImage, setCloudinaryImage] = useState("")


konst handleUpload = (e) => {
 e.preventDefault();
konst formData = ny FormData ();
 formData.append("fil", Last opp fil);
 formData.append("upload_preset", "ditt forhåndsinnstilte opplastingsnavn");


 Axios.post(
" https://api.cloudinary.com/v1_1/your Cloudinary skynavn/bilde/opplasting",
 formData
 )
 .deretter((respons) => {
konsoll.log (svar);
 setCloudinaryImage (response.data.secure_url);
 })
 .å fange((feil) => {
konsoll.log (feil);
 });
 };
komme tilbake ( 
"App"> 
"venstre side"> 


 Last opp bilder til Cloudinary Cloud Storage</h3>


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

Her er hva opplastingskoden gjør:

  • Erklærer to stater, Last opp fil og cloudinaryImage. Den bruker disse til å lagre den opplastede filen og det resulterende bildet fra Cloudinary.
  • Inndatafeltet lar deg velge en bildefil fra maskinens filsystem. Når du velger en fil, oppdaterer den verdien til uploadFile-variabelen.
  • De handleLast opp funksjonen bruker Axios for å sende en postforespørsel til Cloudinary. Den overføres i den opplastede filen og opplastingsforhåndsinnstillingen du har knyttet til Cloudinary-skykontoen din. Ved å klikke på send-knappen kalles denne funksjonen.
  • Når koden mottar et svar, lagrer den sikker_url av Cloudinary-bildet i staten.
  • Til slutt gjengir den to seksjoner, en for å laste opp filen og den andre for å vise det resulterende bildet.

Importer og gjengi upload.js-komponenten i app.js-filen din. Du bør se et svar som dette i nettleseren din når du velger og laster opp bildefilen:

Gå over til Cloudinary-kontoen din, og klikk på Mediebibliotek for å se den opplastede filen.

Å integrere Cloudinary-widgeten i React-applikasjonen din forenkler opplastingsprosessen betraktelig. I tillegg lar widgeten deg laste opp bildefiler fra ulike kilder, for eksempel Dropbox.

For å integrere widgeten i React-appen din, må du først inkludere widgetens eksterne JavaScript-bibliotek i index.html-filen din i /public-katalogen. Legg til script-koden nedenfor i head-delen i index.html-filen.

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

Deretter legger du til følgende endringer i upload.js-filen din:

  • Importer følgende Reager kroker: useEffect og useRef. 
    import {useState, useEffect, useRef} fra'reagere';
  • Legg til koden nedenfor: 
    konst cloudinaryRef = brukRef();
    konst widgetRef = useRef();
     useEffect(() => {
     cloudinaryRef.current = vindu.cloudinary;
     widgetRef.current = cloudinaryRef.current.createUploadWidget({
     skynavn: "ditt skynavn på skyen", 
     last opp forhåndsinnstilling: «navnet på forhåndsinnstilling for opplasting»
     }, (feil, resultat) => { 
    konsoll.log (feil, resultat)
     });
     }, []);
    Koden ovenfor oppretter en referanse til Cloudinary-objektet og opplastingswidgeten ved å bruke useRef-kroken. UseEffect-kroken kjører koden inne i tilbakeringingen én gang når komponenten monteres. Du initialiserer deretter widgeten ved å bruke skynavnet ditt og laster opp forhåndsinnstilt navn og logger resultatene og feilene som kan oppstå fra widgeten.
  • Til slutt oppretter du en knapp som, når den klikkes, vil påkalle og åpne opplastingswidgeten.

Få mest mulig ut av Cloudinary

Cloudinary tilbyr en brukervennlig løsning som forenkler prosessen med å administrere bildefiler og andre medieressurser.

Bortsett fra å tilby en skylagringsplattform, tilbyr Cloudinary også funksjoner som bildetransformasjoner og bildeoptimalisering. Dette er viktige verktøy for å forbedre kvaliteten på mediemidlene dine.