Läsare som du hjälper till att stödja MUO. När du gör ett köp med hjälp av länkar på vår webbplats kan vi tjäna en affiliate-provision. Läs mer.

Många applikationer är beroende av webben för sitt innehåll. Genom att vara värd för bildtillgångar på en tredjeparts molnplattform kan du säkerställa att dina appar har snabb och effektiv åtkomst till dem.

Dessutom slipper du de lagrings- och bandbreddskostnader som du skulle ådra dig att vara värd för tillgångarna med hjälp av lokala servrar. Det är därför som molnlösningar för bildvärd som Cloudinary har blivit allt populärare.

Följ med för att lära dig hur du använder Cloudinary för att vara värd för dina bildtillgångar.

Vad är bildvärd och varför är det viktigt?

Bildvärd är en typ av webbhotell som låter dig lagra och komma åt dina bildtillgångar eller andra digitala medier på en tredjeparts molnplattform.

Medietillgångar som bilder är viktiga för att skapa en fantastisk användarupplevelse för alla webbapplikationer. Bildvärdtjänster gör det enkelt för dig att ladda upp, lagra, hämta och hantera dina tillgångar från molnet, Följaktligen förbättrar du din applikations prestanda genom att säkerställa snabbare laddningstider och bättre bild kvalitet.

instagram viewer

Vad är molnigt?

Cloudinary är en molnbaserad mediehanteringsplattform. Den tillhandahåller funktioner som gör det enkelt för dig att ladda upp, lagra och hantera digitala mediatillgångar som bilder och videor. I grund och botten gör Cloudinary det enklare att hantera alla dina digitala medier som behövs för alla applikationer från en plattform.

Konfigurera ett molnprojekt för att vara värd för bildfiler

För att komma igång med att ladda upp och vara värd för bildfiler, registrera dig för en Molnigt konto.

Logga in på ditt kontos instrumentpanel och klicka på fliken Inställningar i den vänstra menyrutan.

På inställningssidan klickar du på Ladda upp knappen för att öppna sidan för uppladdningsinställningar.

Gå nu över till Ladda upp förinställningar inställningar och klicka på Lägg till förinställning för uppladdning för att skapa en ny uppladdningsförinställning för din applikation.

En förinställning för uppladdning är en konfiguration av parametrar som definierar standardstrukturen för alla mediafiler du laddar upp på Cloudinary. De låter dig definiera en uppsättning regler som ska tillämpas varje gång du laddar upp en mediefil.

De förinställda parametrarna säkerställer att Cloudinary optimerar alla mediefiler för leverans till din applikation, vilket förbättrar prestandan och minskar laddningstiden.

Fyll i namnet på din förinställning och välj osignerad läge från rullgardinsmenyn som visas. Signeringslägena låter dig specificera metoderna Cloudinary använder för att autentisera och auktorisera eventuella mediauppladdningar.

Genom att välja det osignerade läget kan du göra uppladdningar till din Cloudinary-lagring från dina applikationer utan att autentisera med Cloudinary. Enkelt uttryckt låter det här läget dig välja en bild och ladda upp den direkt från din applikation. Cloudinary kommer sedan att leverera den på begäran.

När du har gjort dessa ändringar, fortsätt och klicka Spara för att skapa uppladdningsförinställningen.

Skapa en Demo React-applikation

Du kan ställa in en enkel React-applikation för att hantera uppladdningsfunktioner med hjälp av Cloudinary API-slutpunkten och uppladdningswidgeten.

För att starta, skapa en demo React-applikation. Kör sedan kommandot nedan för att snurra upp utvecklingsservern och navigera till http://localhost: 3000 i din webbläsare för att se resultaten.

npm start

Kör sedan det här kommandot för att installera Axios, ett JavaScript-bibliotek som används för att göra HTTP-förfrågningar från webbläsaren.

npm installera axios

Ladda upp bildfiler med Cloudinary API Endpoint

Efter att ha ställt in React-appen, skapa en uppladdningskomponent som gör en POST-begäran till Cloudinarys API-slutpunkt för att ladda upp bildfiler på Cloudinary molnlagring. Du kommer sedan att destrukturera API-svaret för att visa den uppladdade bilden.

Skapa en uppladdningskomponent

I /src-katalogen, skapa en ny mapp och namnge den, komponenter. I den här mappen skapar du en ny fil, Upload.js.

Lägg till koden nedan i filen Upload.js:

importera Reagera, {useState} från'reagera';
importera Axios från"axios";
fungeraLadda upp() {
konst [uploadFile, setUploadFile] = useState("");
konst [cloudinaryImage, setCloudinaryImage] = useState("")


konst handleUpload = (e) => {
 e.preventDefault();
konst formData = ny FormData ();
 formData.append("fil", ladda upp fil);
 formData.append("upload_preset", "ditt förinställda uppladdningsnamn");


 Axios.post(
" https://api.cloudinary.com/v1_1/your Molnet molnnamn/bild/uppladdning",
 formData
 )
 .sedan((svar) => {
trösta.log (svar);
 setCloudinaryImage (response.data.secure_url);
 })
 .fånga((fel) => {
trösta.log (fel);
 });
 };
lämna tillbaka ( 
"App"> 
"vänster sida"> 


 Ladda upp bilder till Cloudinary Cloud Storage</h3>


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

Så här gör uppladdningskoden:

  • förklarar två stater, ladda upp fil och molnig bild. Den använder dessa för att lagra den uppladdade filen och den resulterande bilden från Cloudinary.
  • Inmatningsfältet låter dig välja en bildfil från din maskins filsystem. När du väljer en fil uppdateras värdet för variabeln uploadFile.
  • De handleUpload funktionen använder Axios för att göra en postförfrågan till Cloudinary. Den skickas i den uppladdade filen och uppladdningsförinställningen som du har kopplat till ditt Cloudinary molnkonto. Genom att klicka på knappen Skicka anropas denna funktion.
  • När koden får ett svar lagras den säker_url av molnbilden i staten.
  • Slutligen återger den två sektioner, en för att ladda upp filen och den andra för att visa den resulterande bilden.

Importera och rendera upload.js-komponenten i din app.js-fil. Du bör se ett sådant här svar i din webbläsare när du väljer och laddar upp bildfilen:

Gå över till ditt Cloudinary-konto och klicka på Media bibliotek fliken för att se den uppladdade filen.

Att integrera Cloudinary-widgeten i din React-applikation förenklar uppladdningsprocessen avsevärt. Dessutom låter widgeten dig ladda upp bildfiler från olika källor, som Dropbox.

För att integrera widgeten i din React-app måste du först inkludera widgetens fjärr-JavaScript-bibliotek i din index.html-fil i /public-katalogen. Lägg till skripttaggen nedan i rubriken i din index.html-fil.

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

Lägg sedan till i filen upload.js och gör följande ändringar:

  • Importera följande Reagera krokar: useEffect och useRef. 
    importera {useState, useEffect, useRef} från'reagera';
  • Lägg till koden nedan: 
    konst cloudinaryRef = useRef();
    konst widgetRef = useRef();
     useEffect(() => {
     cloudinaryRef.current = fönster.molnig;
     widgetRef.current = cloudinaryRef.current.createUploadWidget({
     molnnamn: "ditt molniga molnnamn", 
     ladda upp Förinställning: "uppladdningsförinställningens namn"
     }, (fel, resultat) => { 
    trösta.log (fel, resultat)
     });
     }, []);
    Koden ovan skapar en referens till Cloudinary-objektet och uppladdningswidgeten med hjälp av useRef-kroken. UseEffect-kroken kör koden inuti återuppringningen en gång när komponenten monteras. Du initierar sedan widgeten med ditt molnnamn och laddar upp förinställt namn och loggar resultaten och felen som kan uppstå från widgeten.
  • Slutligen, skapa en knapp som, när den klickas, kommer att anropa och öppna uppladdningswidgeten.

Få ut det mesta av Cloudinary

Cloudinary tillhandahåller en användarvänlig lösning som förenklar processen med att hantera bildfiler och andra mediatillgångar.

Förutom att tillhandahålla en molnlagringsplattform erbjuder Cloudinary också funktioner som bildtransformationer och bildoptimering. Dessa är viktiga verktyg för att förbättra kvaliteten på dina medietillgångar.