Læsere som dig hjælper med at støtte MUO. Når du foretager et køb ved hjælp af links på vores websted, kan vi optjene en affiliate-kommission. Læs mere.

Mange applikationer er afhængige af internettet for deres indhold. Ved at hoste billedaktiver på en tredjeparts cloud-platform kan du sikre, at dine apps har hurtig og effektiv adgang til dem.

Desuden vil du undgå de lager- og båndbreddeomkostninger, du ville pådrage dig ved at være vært for aktiverne ved hjælp af lokale servere. Dette er grunden til, at image-hosting cloud-løsninger som Cloudinary er blevet mere og mere populære.

Følg med for at lære, hvordan du bruger Cloudinary til at hoste dine billedaktiver.

Hvad er Image Hosting, og hvorfor er det vigtigt?

Billedhosting er en type webhostingtjeneste, der giver dig mulighed for at gemme og få adgang til dine billedaktiver eller andre digitale medier på en tredjeparts cloud-platform.

Medieaktiver såsom billeder er afgørende for at skabe en fantastisk brugeroplevelse for enhver webapplikation. Billedhostingtjenester gør det nemt for dig at uploade, gemme, hente og administrere dine aktiver fra skyen, som følge heraf forbedre din applikations ydeevne ved at sikre hurtigere indlæsningstider og bedre image kvalitet.

instagram viewer

Hvad er Cloudinary?

Cloudinary er en cloud-baseret medieadministrationsplatform. Det giver funktioner, der gør det nemt for dig at uploade, gemme og administrere digitale medieaktiver såsom billeder og videoer. Grundlæggende gør Cloudinary det nemmere at administrere alle dine digitale medier, der er nødvendige for enhver applikation fra én platform.

Konfigurer et Cloudinary-projekt til at hoste billedfiler

For at komme i gang med at uploade og hoste billedfiler skal du tilmelde dig en Skyet konto.

Log ind på dit kontos dashboard, og klik på fanen Indstillinger-ikon i venstre menurude.

På indstillingssiden skal du klikke på Upload knappen for at åbne siden med uploadindstillinger.

Gå nu over til Upload forudindstillinger Indstillinger og klik på Tilføj upload forudindstilling for at oprette en ny upload-forudindstilling til din applikation.

En upload forudindstilling er en konfiguration af parametre, der definerer standardstrukturen for enhver mediefil, du uploader på Cloudinary. De lader dig definere et sæt regler, der skal gælde, hver gang du uploader en mediefil.

De forudindstillede parametre sikrer, at Cloudinary optimerer alle mediefiler til levering til din applikation, hvilket forbedrer ydeevnen og reducerer indlæsningstiden.

Udfyld navnet på din forudindstilling, og vælg usigneret tilstand fra den viste rullemenu. Signeringstilstandene giver dig mulighed for at specificere de metoder, Cloudinary bruger til at godkende og godkende eventuelle medieuploads.

Hvis du vælger den usignerede tilstand, kan du uploade til dit Cloudinary-lager fra dine applikationer uden at godkende med Cloudinary. Kort sagt giver denne tilstand dig mulighed for at vælge et billede og uploade det direkte fra din applikation. Cloudinary vil derefter levere det efter anmodning.

Når du har foretaget disse ændringer, skal du gå videre og klikke Gemme for at oprette upload-forudindstillingen.

Opret en Demo React-applikation

Du kan konfigurere en simpel React-applikation til at håndtere uploadfunktionalitet ved hjælp af Cloudinary API-slutpunktet og upload-widgetten.

For at komme i gang, oprette en demo React-applikation. Kør derefter kommandoen nedenfor for at skrue udviklingsserveren op og navigere til http://localhost: 3000 på din browser for at se resultaterne.

npm start

Kør derefter denne kommando for at installere Axios, et JavaScript-bibliotek, der bruges til at lave HTTP-anmodninger fra browseren.

npm installere aksioer

Upload billedfiler ved hjælp af Cloudinary API-slutpunkt

Efter opsætning af React-appen skal du oprette en upload-komponent, der sender en POST-anmodning til Cloudinarys API-slutpunkt for at uploade billedfiler til Cloudinary cloud-lager. Du vil derefter destrukturere API-svaret for at vise det uploadede billede.

Opret en uploadkomponent

I mappen /src skal du oprette en ny mappe og navngive den, komponenter. I denne mappe skal du oprette en ny fil, Upload.js.

Tilføj koden nedenfor i filen Upload.js:

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


konst handleUpload = (e) => {
 e.preventDefault();
konst formData = ny FormData ();
 formData.append("fil", Upload fil);
 formData.append("upload_preset", "dit forudindstillede uploadnavn");


 Axios.post(
" https://api.cloudinary.com/v1_1/your Cloudinary cloud navn/billede/upload",
 formData
 )
 .derefter((respons) => {
konsol.log (svar);
 setCloudinaryImage (response.data.secure_url);
 })
 .fangst((fejl) => {
konsol.log (fejl);
 });
 };
Vend tilbage ( 
"App"> 
"venstre side"> 


 Upload billeder til Cloudinary Cloud Storage</h3>


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

Her er hvad uploadkoden gør:

  • Erklærer to stater, Upload fil og cloudinaryImage. Den bruger disse til at gemme den uploadede fil og det resulterende billede fra Cloudinary.
  • Indtastningsfeltet giver dig mulighed for at vælge en billedfil fra din maskines filsystem. Når du vælger en fil, opdaterer den værdien af ​​uploadFile-variablen.
  • Det handleUpload funktion bruger Axios til at lave en postanmodning til Cloudinary. Det overføres i den uploadede fil og den upload-forudindstilling, du har knyttet til din Cloudinary-skykonto. Hvis du klikker på indsend-knappen, kaldes denne funktion.
  • Når koden modtager et svar, gemmer den sikker_url af skybilledet i staten.
  • Til sidst gengiver den to sektioner, en til upload af filen og den anden til at vise det resulterende billede.

Importer og gengiv upload.js-komponenten i din app.js-fil. Du bør se et svar som dette i din browser, når du har valgt og uploadet billedfilen:

Gå over til din Cloudinary-konto, og klik på Mediebibliotek fanen for at se den uploadede fil.

At integrere Cloudinary-widgetten i din React-applikation forenkler uploadprocessen betydeligt. Derudover giver widgetten dig mulighed for at uploade billedfiler fra forskellige kilder, såsom Dropbox.

For at integrere widgetten i din React-app skal du først inkludere widgetens eksterne JavaScript-bibliotek i din index.html-fil i /public-mappen. Tilføj script-tagget nedenfor ved hovedafsnittet i din index.html-fil.

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

Dernæst skal du tilføje følgende ændringer i din upload.js-fil:

  • Importer følgende Reager kroge: useEffect og useRef. 
    importere {useState, useEffect, useRef} fra'reagere';
  • Tilføj koden nedenfor: 
    konst cloudinaryRef = useRef();
    konst widgetRef = useRef();
     useEffect(() => {
     cloudinaryRef.current = vindue.sky;
     widgetRef.current = cloudinaryRef.current.createUploadWidget({
     skynavn: 'dit cloudinary cloud-navn', 
     uploadPreset: 'navnet på upload forudindstillet'
     }, (fejl, resultat) => { 
    konsol.log (fejl, resultat)
     });
     }, []);
    Koden ovenfor opretter en reference til Cloudinary-objektet og upload-widgetten ved hjælp af useRef-krogen. UseEffect-krogen kører koden inde i tilbagekaldet én gang, når komponenten monteres. Du initialiserer derefter widgetten ved at bruge dit cloudnavn og uploader forudindstillet navn og logger de resultater og fejl, der kan opstå fra widgetten.
  • Til sidst skal du oprette en knap, der, når der klikkes på den, vil påkalde og åbne upload-widgetten.

Få mest muligt ud af Cloudinary

Cloudinary leverer en brugervenlig løsning, der forenkler processen med at administrere billedfiler og andre medieaktiver.

Udover at tilbyde en cloud-lagringsplatform tilbyder Cloudinary også funktioner såsom billedtransformationer og billedoptimering. Disse er vigtige værktøjer til at forbedre kvaliteten af ​​dine medieaktiver.