Kaltaisesi lukijat auttavat tukemaan MUO: ta. Kun teet ostoksen käyttämällä sivustollamme olevia linkkejä, voimme ansaita kumppanipalkkion. Lue lisää.

Monet sovellukset ovat riippuvaisia ​​verkosta sisällön suhteen. Isännöimällä kuvamateriaalia kolmannen osapuolen pilvialustan avulla voit varmistaa, että sovelluksillasi on nopea ja tehokas pääsy niihin.

Lisäksi vältyt tallennus- ja kaistanleveyskustannuksilta, joita aiheutuisi omaisuuden isännöimisestä paikan päällä sijaitsevien palvelimien avulla. Tästä syystä Cloudinaryn kaltaisista kuvien isännöintipilviratkaisuista on tullut yhä suositumpia.

Seuraa ohjeita oppiaksesi käyttämään Cloudinarya kuvasisältöjesi isännöimiseen.

Mikä on kuvahosting ja miksi se on tärkeää?

Kuvanhosting on eräänlainen web-isännöintipalvelu, jonka avulla voit tallentaa ja käyttää kuvasisältöäsi tai muuta digitaalista mediaa kolmannen osapuolen pilvialustalla.

Mediaresurssit, kuten kuvat, ovat tärkeitä luotaessa loistavaa käyttökokemusta mille tahansa verkkosovellukselle. Kuvien isännöintipalveluiden avulla voit helposti ladata, tallentaa, hakea ja hallita omaisuuttasi pilvestä, näin ollen parantaa sovelluksesi suorituskykyä varmistamalla nopeammat latausajat ja paremman kuvan laatu.

instagram viewer

Mikä on pilvinen?

Cloudinary on pilvipohjainen medianhallintaalusta. Se tarjoaa ominaisuuksia, joiden avulla voit helposti ladata, tallentaa ja hallita digitaalisia mediasisältöjä, kuten kuvia ja videoita. Pohjimmiltaan Cloudinary helpottaa kaiken minkä tahansa sovelluksen tarvitseman digitaalisen median hallintaa yhdeltä alustalta.

Luo pilviprojekti kuvatiedostojen isännöintiä varten

Aloita kuvatiedostojen lataaminen ja isännöinti rekisteröitymällä a Pilvistä tili.

Kirjaudu tilisi hallintapaneeliin ja napsauta vasemmanpuoleisen valikkoruudun asetuskuvake-välilehteä.

Napsauta asetussivulla Lataa -painiketta avataksesi latausasetussivun.

Siirry nyt kohti Lataa esiasetukset Asetukset-osio ja napsauta Lisää lähetyksen esiasetus luodaksesi uuden latausesiasetuksen sovelluksellesi.

Latauksen esiasetus on parametrien kokoonpano, joka määrittelee Cloudinaryyn ladattavien mediatiedostojen oletusrakenteen. Niiden avulla voit määrittää sääntöjä, joita sovelletaan aina, kun lataat mediatiedoston.

Esiasetetut parametrit varmistavat, että Cloudinary optimoi kaikki mediatiedostot toimitettaviksi sovellukseesi, mikä parantaa suorituskykyä ja lyhentää latausaikaa.

Täytä esiasetuksen nimi ja valitse allekirjoittamaton tila avattavasta valikosta. Allekirjoitustilojen avulla voit määrittää menetelmät, joita Cloudinary käyttää medialatausten todentamiseen ja valtuutukseen.

Allekirjoittamattoman tilan valitseminen mahdollistaa latauksia Cloudinary-tallennustilaan sovelluksistasi ilman Cloudinary-todennusta. Yksinkertaisesti sanottuna tässä tilassa voit valita kuvan ja ladata sen suoraan sovelluksestasi. Cloudinary toimittaa sen sitten pyynnöstä.

Kun olet tehnyt nämä muutokset, siirry eteenpäin ja napsauta Tallentaa luodaksesi latauksen esiasetuksen.

Luo Demo React -sovellus

Voit määrittää yksinkertaisen React-sovelluksen käsittelemään lataustoimintoja Cloudinary API -päätepisteen ja latauswidgetin avulla.

Aloita luo demo React -sovellus. Suorita seuraavaksi alla oleva komento käynnistääksesi kehityspalvelimen ja siirtyäksesi siihen http://localhost: 3000 selaimessasi nähdäksesi tulokset.

npm aloitus

Suorita seuraavaksi tämä komento asentaaksesi Axios, JavaScript-kirjasto, jota käytetään HTTP-pyyntöjen tekemiseen selaimesta.

npm asennus axios

Lataa kuvatiedostoja Cloudinary API -päätepisteen avulla

Kun olet määrittänyt React-sovelluksen, luo latauskomponentti, joka lähettää POST-pyynnön Cloudinaryn API-päätepisteeseen kuvatiedostojen lataamiseksi Cloudinary-pilvitallennustilaan. Tämän jälkeen API-vastauksen rakenne tuhotaan näyttääksesi ladatun kuvan.

Luo latauskomponentti

Luo /src-hakemistoon uusi kansio ja nimeä se komponenteiksi. Luo tähän kansioon uusi tiedosto, Upload.js.

Lisää alla oleva koodi Upload.js-tiedostoon:

tuonti Reagoi, {useState} alkaen'reagoi';
tuonti Axios alkaen"aksiot";
toimintoLataa() {
konst [uploadFile, setUploadFile] = useState("");
konst [cloudinaryImage, setCloudinaryImage] = useState("")


konst handleUpload = (e) => {
 e.preventDefault();
konst formData = Uusi FormData ();
 formData.append("tiedosto", lataa tiedosto);
 formData.append("upload_preset", "latauksen esiasetettu nimi");


 Axios.post(
" https://api.cloudinary.com/v1_1/your Pilvipilven nimi/kuva/lataus",
 formData
 )
 .sitten((vastaus) => {
konsoli.log (vastaus);
 setCloudinaryImage (response.data.secure_url);
 })
 .ottaa kiinni((virhe) => {
konsoli.log (virhe);
 });
 };
palata ( 
"Sovellus"> 
"vasen puoli"> 


 Lataa kuvia Cloudinary Cloud Storageen</h3>


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

Latauskoodi tekee näin:

  • Julistaa kaksi valtiota, lataa tiedosto ja pilvinen kuva. Se käyttää näitä tallentaakseen ladatun tiedoston ja tuloksena olevan kuvan Cloudinarysta.
  • Syöttökentässä voit valita kuvatiedoston koneen tiedostojärjestelmästä. Kun valitset tiedoston, se päivittää uploadFile-muuttujan arvon.
  • The käsitteleLataa -toiminto käyttää Axiosta julkaisupyynnön tekemiseen Cloudinarylle. Se välittää ladatun tiedoston ja lähetyksen esiasetuksen, jonka olet liittänyt Cloudinary-pilvitiliisi. Lähetä-painikkeen napsauttaminen kutsuu tämän toiminnon.
  • Kun koodi saa vastauksen, se tallentaa suojattu_url Cloudinary-kuvasta tilassa.
  • Lopuksi se renderöi kaksi osaa, joista toinen tiedoston lataamista varten ja toinen tuloksena olevan kuvan näyttämistä varten.

Tuo ja hahmonna upload.js-komponentti app.js-tiedostossasi. Sinun pitäisi nähdä tällainen vastaus selaimessasi, kun valitset ja lataat kuvatiedoston:

Siirry Cloudinary-tilillesi ja napsauta Mediakirjasto -välilehti näyttääksesi ladatun tiedoston.

Cloudinary-widgetin integrointi React-sovellukseesi yksinkertaistaa latausprosessia merkittävästi. Lisäksi widgetin avulla voit ladata kuvatiedostoja eri lähteistä, kuten Dropboxista.

Jotta voit integroida widgetin React-sovellukseesi, sinun on ensin sisällytettävä widgetin JavaScript-etäkirjasto index.html-tiedostoosi /public-hakemistossa. Lisää alla oleva komentosarjatunniste index.html-tiedostosi head-osioon.

<käsikirjoitussrc=" https://upload-widget.cloudinary.com/global/all.js"
 type="text/javascript">käsikirjoitus>

Lisää seuraavaksi upload.js-tiedostoosi ja tee seuraavat muutokset:

  • Tuo seuraavat Reagoi koukut: useEffect ja useRef. 
    tuonti {useState, useEffect, useRef} alkaen'reagoi';
  • Lisää alla oleva koodi: 
    konst cloudinaryRef = useRef();
    konst widgetRef = useRef();
     useEffect(() => {
     cloudinaryRef.current = ikkuna.pilvinen;
     widgetRef.current = cloudinaryRef.current.createUploadWidget({
     cloudName: "pilvipilven nimesi", 
     uploadPreset: "latauksen esiasetettu nimi"
     }, (virhe, tulos) => { 
    konsoli.log (virhe, tulos)
     });
     }, []);
    Yllä oleva koodi luo viittauksen Cloudinary-objektiin ja latauswidgetiin useRef-koukun avulla. UseEffect-koukku suorittaa koodin takaisinkutsun sisällä kerran, kun komponentti asennetaan. Alustat sitten widgetin käyttämällä pilvinimeäsi ja lähetät esiasetetun nimen ja kirjaat tulokset ja virheet, joita voi esiintyä widgetistä.
  • Luo lopuksi painike, jota napsautettava käynnistää ja avaa latauswidgetin.

Ota kaikki irti pilvestä

Cloudinary tarjoaa käyttäjäystävällisen ratkaisun, joka yksinkertaistaa kuvatiedostojen ja muiden mediaresurssien hallintaa.

Pilvitallennusalustan tarjoamisen lisäksi Cloudinary tarjoaa myös ominaisuuksia, kuten kuvien muunnoksia ja kuvan optimointia. Nämä ovat välttämättömiä työkaluja mediasisältöjesi laadun parantamiseen.