Kuidas majutada pildifaile Cloudinarys Reacti rakenduses

Paljud rakendused sõltuvad sisu osas veebist. Majutades pildivarasid kolmanda osapoole pilveplatvormil, saate tagada, et teie rakendustel on neile kiire ja tõhus juurdepääs.

Lisaks väldite salvestus- ja ribalaiusega seotud kulusid, mis tekivad varade hostimisel kohapealsete serverite abil. Seetõttu on piltide hostimise pilvelahendused, nagu Cloudinary, muutunud üha populaarsemaks.

Järgige teksti, et õppida, kuidas kasutada Cloudinaryt oma pildivarade hostimiseks.

Mis on pildimajutus ja miks see on oluline?

Pildihostimine on teatud tüüpi veebimajutusteenus, mis võimaldab teil oma pildivarasid või muud digitaalset meediat salvestada ja neile juurde pääseda kolmanda osapoole pilveplatvormil.

Meediavarad, nagu pildid, on iga veebirakenduse jaoks suurepärase kasutuskogemuse loomisel olulised. Piltide hostimise teenused muudavad teie varade pilvest üleslaadimise, salvestamise, toomise ja haldamise lihtsaks, järelikult parandades teie rakenduse jõudlust, tagades kiirema laadimisaja ja parema pildi kvaliteet.

Mis on pilvine?

Cloudinary on pilvepõhine meediahaldusplatvorm. See pakub funktsioone, mis hõlbustavad digitaalse meedia varade (nt piltide ja videote) üleslaadimist, salvestamist ja haldamist. Põhimõtteliselt hõlbustab Cloudinary kõigi teie mis tahes rakenduse jaoks vajaliku digitaalse meedia haldamist ühelt platvormilt.

Seadistage pildifailide majutamiseks pilveprojekt

Pildifailide üleslaadimise ja hostimise alustamiseks registreeruge a Pilvine ilm konto.

Logige sisse oma konto juhtpaneelile ja klõpsake vasakpoolsel menüüpaanil seadete ikooni vahekaarti.

Seadete lehel klõpsake nuppu Laadi üles nuppu üleslaadimisseadete lehe avamiseks.

Nüüd pöörduge poole Laadige üles eelseaded seadete jaotist ja klõpsake nuppu Lisa üleslaadimise eelseade et luua oma rakenduse jaoks uus üleslaadimise eelseadistus.

Üleslaadimise eelseadistus on parameetrite konfiguratsioon, mis määravad Cloudinarysse üleslaaditavate meediumifailide vaikestruktuuri. Need võimaldavad teil määratleda reeglistiku, mida rakendatakse iga kord, kui me meediumifaili üles laadite.

Eelseadistatud parameetrid tagavad, et Cloudinary optimeerib kõik meediumifailid teie rakendusse edastamiseks, parandades jõudlust ja vähendades laadimisaega.

Sisestage oma eelseadistuse nimi ja valige allkirjastamata kuvatavast rippmenüüst. Allkirjastamisrežiimid võimaldavad teil määrata meetodeid, mida Cloudinary kasutab mis tahes meedia üleslaadimise autentimiseks ja autoriseerimiseks.

Signeerimata režiimi valimine võimaldab teil oma rakendustest Cloudinary salvestusruumi üles laadida ilma Cloudinaryga autentimata. Lihtsamalt öeldes võimaldab see režiim valida pildi ja selle otse rakendusest üles laadida. Cloudinary tarnib selle nõudmisel.

Pärast nende muudatuste tegemist jätkake ja klõpsake nuppu Salvesta üleslaadimise eelseadistuse loomiseks.

Looge Demo React rakendus

Saate seadistada lihtsa Reacti rakenduse üleslaadimisfunktsioonide haldamiseks, kasutades Cloudinary API lõpp-punkti ja üleslaadimisvidinat.

Alustamiseks looge demorakendus React. Järgmisena käivitage arendusserveri käivitamiseks ja sinna navigeerimiseks allolev käsk http://localhost: 3000 oma brauseris tulemuste vaatamiseks.

npm start

Järgmisena käivitage see käsk, et installida brauserist HTTP-päringute tegemiseks kasutatav JavaScripti teek Axios.

npm install axios

Pildifailide üleslaadimine Cloudinary API lõpp-punkti abil

Pärast rakenduse React seadistamist looge üleslaadimiskomponent, mis teeb POST-i päringu Cloudinary API lõpp-punktile pildifailide üleslaadimiseks Cloudinary pilvmälusse. Seejärel destruktureerite API vastuse, et kuvada üleslaaditud pilt.

Looge üleslaadimiskomponent

Looge kataloogis /src uus kaust ja nimetage see, komponendid. Looge selles kaustas uus fail Upload.js.

Lisage faili Upload.js allolev kood:

importida Reageerige, {useState} alates'reageeri';
importida Axios alates"aksios";
funktsiooniLaadi üles() {
konst [uploadFile, setUploadFile] = useState("");
konst [cloudinaryImage, setCloudinaryImage] = useState("")
konst handupload = (e) => {
 e.preventDefault();
konst formData = uus VormData ();
 formData.append("fail", faili üles laadima);
 formData.append("upload_preset", "teie üleslaadimise eelseadistatud nimi");
 Axios.post(
" https://api.cloudinary.com/v1_1/your Pilvepilve nimi/pilt/üleslaadimine",
 formData
 )
 .hen((vastuseks) => {
konsool.log (vastus);
 setCloudinaryImage (response.data.secure_url);
 })
 .catch((viga) => {
konsool.log (viga);
 });
 };
tagasi ( 
"Rakendus"> 
"vasak pool"> 


 Piltide üleslaadimine pilvepilvesalvestusse</h3>


"fail"
 onChange ={(sündmus) => {setUploadFile (event.target.files[0]);}} 
 />
 </div>
 Laadi fail üles</button>
 </form> 
 </section>
"parem pool">
Saadud pilt kuvatakse siin</h3>
 {cloudinaryImage && ( <imgsrc={cloudinaryImage} /> )}
 </section>
 </div>
 );
} 
eksportidavaikimisi Laadi üles;

Üleslaadimiskood teeb järgmist.

• deklareerib kahte riiki, faili üles laadima ja pilvinePilt. Ta kasutab neid üleslaaditud faili ja sellest tuleneva pildi Cloudinaryst salvestamiseks.
• Sisestusväli võimaldab teil valida pildifaili oma masina failisüsteemist. Kui valite faili, värskendab see muutuja uploadFile väärtust.
• The käepide üleslaadimine funktsioon kasutab Axiost, et teha Cloudinaryle postitamispäring. See edastab üleslaaditud faili ja üleslaadimise eelseadistuse, mille olete oma Cloudinary pilvekontoga seostanud. Esitamisnupul klõpsates kutsutakse see funktsioon välja.
• Kui kood saab vastuse, salvestab see koodi turvaline_url Pilvekujutise olekus.
• Lõpuks renderdab see kaks jaotist, millest üks on faili üleslaadimiseks ja teine ​​saadud pildi kuvamiseks.

Importige ja renderdage failis app.js komponent upload.js. Pärast pildifaili valimist ja üleslaadimist peaksite oma brauseris nägema sellist vastust:

Minge oma Cloudinary kontole ja klõpsake nuppu Meediumiteek üleslaaditud faili vaatamiseks vahekaarti.

Cloudinary vidina integreerimine oma Reacti rakendusse lihtsustab oluliselt üleslaadimisprotsessi. Lisaks võimaldab vidin üles laadida pildifaile erinevatest allikatest, näiteks Dropboxist.

Vidina integreerimiseks oma Reacti rakendusse peate esmalt lisama vidina JavaScripti kaugteegi oma index.html faili kataloogis /public. Lisage allolev skriptimärgend faili index.html päise jaotisesse.

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

Järgmisena lisage failis upload.js ja tehke järgmised muudatused.

• Importige järgmised Reageeri konksud: useEffect ja useRef.

  importida {useState, useEffect, useRef} alates'reageeri';

• Lisage allolev kood:

  konst cloudinaryRef = useRef();
  konst widgetRef = useRef();
   useEffect(() => {
   cloudinaryRef.current = aken.pilvine;
   widgetRef.current = cloudinaryRef.current.createUploadWidget({
   cloudName: "teie pilvepilve nimi", 
   uploadPreset: 'üleslaadimise eelseadistatud nimi'
   }, (viga, tulemus) => { 
  konsool.log (viga, tulemus)
   });
   }, []);

  Ülaltoodud kood loob viite Cloudinary objektile ja üleslaadimisvidinale, kasutades konksu useRef. Konks useEffect käivitab komponendi paigaldamisel tagasihelistamisel koodi ühe korra. Seejärel lähtestate vidina oma pilve nime ja laadite üles eelseadistatud nime abil ning logite vidinast ilmneda võivaid tulemusi ja tõrke.
• Lõpuks looge nupp, millel klõpsamine käivitab ja avab üleslaadimisvidina.

   widgetRef.current.open()} >
   Laadi üles vidina kaudu
  </button>

Pilvesest maksimumi saamine

Cloudinary pakub kasutajasõbralikku lahendust, mis lihtsustab pildifailide ja muude meediumivarade haldamist.

Lisaks pilvesalvestusplatvormi pakkumisele pakub Cloudinary ka selliseid funktsioone nagu piltide teisendamine ja pildi optimeerimine. Need on olulised tööriistad teie meediavarade kvaliteedi tõstmiseks.