Kaip talpinti vaizdo failus „Cloudinary“ programoje „React“.

Daugelio programų turinys priklauso nuo žiniatinklio. Priglobdami vaizdo išteklius trečiosios šalies debesies platformoje, galite užtikrinti, kad jūsų programos turės greitą ir efektyvią prieigą prie jų.

Be to, išvengsite saugojimo ir pralaidumo išlaidų, kurias patirtumėte priglobdami turtą naudodami vietinius serverius. Štai kodėl vaizdų prieglobos debesų sprendimai, tokie kaip „Cloudinary“, tapo vis populiaresni.

Sekite toliau ir sužinokite, kaip naudoti „Cloudinary“ vaizdo ištekliams priglobti.

Kas yra vaizdo talpinimas ir kodėl tai svarbu?

Vaizdų priegloba yra žiniatinklio prieglobos paslauga, leidžianti saugoti ir pasiekti savo vaizdo išteklius ar kitą skaitmeninę laikmeną trečiosios šalies debesies platformoje.

Medijos turtas, pvz., vaizdai, yra būtinas kuriant puikią bet kurios žiniatinklio programos naudotojo patirtį. Vaizdų prieglobos paslaugos leidžia lengvai įkelti, saugoti, nuskaityti ir valdyti išteklius iš debesies, todėl padidinsite programos našumą užtikrindami greitesnį įkėlimo laiką ir geresnį vaizdą kokybės.

Kas yra debesuota?

„Cloudinary“ yra debesies pagrindu sukurta žiniasklaidos valdymo platforma. Jame yra funkcijų, kurios leidžia lengvai įkelti, saugoti ir tvarkyti skaitmeninės medijos išteklius, pvz., vaizdus ir vaizdo įrašus. Iš esmės „Cloudinary“ leidžia lengviau valdyti visą skaitmeninę laikmeną, reikalingą bet kuriai programai iš vienos platformos.

Sukurkite debesų projektą vaizdo failams priglobti

Norėdami pradėti įkelti ir priglobti vaizdo failus, prisiregistruokite prie a Debesuota sąskaitą.

Prisijunkite prie paskyros informacijos suvestinės ir spustelėkite nustatymų piktogramos skirtuką kairiojoje meniu srityje.

Nustatymų puslapyje spustelėkite Įkelti mygtuką, kad atidarytumėte įkėlimo nustatymų puslapį.

Dabar eikite į Įkelti išankstinius nustatymus nustatymų skyrių ir spustelėkite Pridėti išankstinį įkėlimo nustatymą kad sukurtumėte naują programos įkėlimo nustatymą.

Išankstinis įkėlimo nustatymas yra parametrų, apibrėžiančių numatytąją bet kurio medijos failo, kurį įkeliate į „Cloudinary“, struktūrą. Jie leidžia apibrėžti taisyklių rinkinį, taikomą kiekvieną kartą, kai įkeliate medijos failą.

Iš anksto nustatyti parametrai užtikrina, kad „Cloudinary“ optimizuotų visus medijos failus, kad jie būtų pristatyti į jūsų programą, pagerintų našumą ir sumažintų įkėlimo laiką.

Įveskite išankstinio nustatymo pavadinimą ir pasirinkite nepasirašytas režimą iš rodomo išskleidžiamojo meniu. Pasirašymo režimai leidžia nurodyti metodus, kuriuos „Cloudinary“ naudoja autentifikuoti ir įgalioti bet kokius medijos įkėlimus.

Pasirinkę nepasirašytą režimą, galėsite įkelti į savo „Cloudinary“ saugyklą iš savo programų be autentifikavimo naudojant „Cloudinary“. Paprasčiau tariant, šis režimas leidžia pasirinkti vaizdą ir įkelti jį tiesiai iš programos. Tada „Cloudinary“ jį pristatys paprašius.

Atlikę šiuos pakeitimus, eikite į priekį ir spustelėkite Sutaupyti kad sukurtumėte išankstinį įkėlimo nustatymą.

Sukurkite demonstracinę reagavimo programą

Galite nustatyti paprastą „React“ programą, kad galėtumėte valdyti įkėlimo funkcijas naudodami „Cloudinary“ API galutinį tašką ir įkėlimo valdiklį.

Pradėti, sukurti demonstracinę React programą. Tada paleiskite toliau pateiktą komandą, kad atidarytumėte kūrimo serverį ir eitumėte į http://localhost: 3000 naršyklėje, kad pamatytumėte rezultatus.

npm pradžia

Tada paleiskite šią komandą, kad įdiegtumėte „Axios“ – „JavaScript“ biblioteką, naudojamą HTTP užklausoms iš naršyklės pateikti.

npm įdiegti axios

Įkelkite vaizdo failus naudodami Cloudinary API endpoint

Nustatę programą „React“, sukurkite įkėlimo komponentą, kuris pateikia POST užklausą į „Cloudinary“ API galutinį tašką, kad būtų galima įkelti vaizdo failus į „Cloudinary“ debesies saugyklą. Tada sunaikinsite API atsaką, kad būtų rodomas įkeltas vaizdas.

Sukurkite įkėlimo komponentą

Kataloge /src sukurkite naują aplanką ir pavadinkite jį komponentais. Šiame aplanke sukurkite naują failą Upload.js.

Į failą Upload.js pridėkite toliau pateiktą kodą:

importuoti Reaguoti, {useState} iš'reaguoti';
importuoti Axios iš"aksios";
funkcijaĮkelti() {
konst [uploadFile, setUploadFile] = useState("");
konst [cloudinaryImage, setCloudinaryImage] = useState("")
konst handUload = (e) => {
 e.preventDefault();
konst formData = naujas FormData ();
 formData.append("failas", įkelti failą);
 formData.append("upload_preset", „Jūsų iš anksto nustatytas įkėlimo pavadinimas“);
 Axios.post(
" https://api.cloudinary.com/v1_1/your Debesų debesies pavadinimas / vaizdas / įkėlimas",
 formData
 )
 .thena((atsakymą) => {
konsolė.log (atsakymas);
 setCloudinaryImage (response.data.secure_url);
 })
 .catch((klaida) => {
konsolė.log (klaida);
 });
 };
grąžinti ( 
"Programėlė"> 
"kairė pusė"> 


 Įkelkite vaizdus į Cloudinary Cloud Storage</h3>


"failas"
 onChange ={(event) => {setUploadFile (event.target.files[0]);}} 
 />
 </div>
 Įkelti failą</button>
 </form> 
 </section>
"dešinioji pusė">
Gautas vaizdas bus rodomas čia</h3>
 {cloudinaryImage && ( <imgsrc={cloudinaryImage} /> )}
 </section>
 </div>
 );
} 
eksportuotinumatytas Įkelti;

Štai ką daro įkėlimo kodas:

• Deklaruoja dvi valstybes, įkelti failą ir debesuotasVaizdas. Jis naudoja juos, kad išsaugotų įkeltą failą ir gautą vaizdą iš „Cloudinary“.
• Įvesties laukas leidžia pasirinkti vaizdo failą iš jūsų įrenginio failų sistemos. Kai pasirenkate failą, jis atnaujina kintamojo uploadFile reikšmę.
• The rankenaĮkelti funkcija naudoja „Axios“, kad pateiktų užklausą „Cloudinary“ paskelbti. Jis perduodamas įkeltame faile ir įkėlimo iš anksto nustatyme, kurį susiejote su „Cloudinary“ debesies paskyra. Spustelėjus mygtuką pateikti, ši funkcija iškviečiama.
• Kai kodas gauna atsakymą, jis išsaugo saugus_url būsenos debesuoto vaizdo vaizdas.
• Galiausiai pateikiamos dvi dalys: viena skirta failui įkelti, o kita – gautam vaizdui rodyti.

Importuokite ir pateikite upload.js komponentą savo app.js faile. Kai pasirinksite ir įkelsite vaizdo failą, naršyklėje turėtumėte pamatyti tokį atsakymą:

Eikite į savo Cloudinary paskyrą ir spustelėkite Žiniasklaidos biblioteka skirtuką norėdami peržiūrėti įkeltą failą.

„Cloudinary“ valdiklio integravimas į „React“ programą labai supaprastina įkėlimo procesą. Be to, valdiklis leidžia įkelti vaizdo failus iš įvairių šaltinių, pvz., „Dropbox“.

Norėdami integruoti valdiklį į programą „React“, pirmiausia turite įtraukti valdiklio nuotolinę „JavaScript“ biblioteką į failą index.html, esantį /viešajame kataloge. Pridėkite toliau pateiktą scenarijaus žymą savo index.html failo antraštės skiltyje.

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

Tada faile upload.js pridėkite ir atlikite šiuos pakeitimus:

• Importuokite toliau nurodytus dalykus Reaguoti kabliukai: useEffect ir useRef.

  importuoti {useState, useEffect, useRef} iš'reaguoti';

• Pridėkite žemiau esantį kodą:

  konst cloudinaryRef = useRef();
  konst widgetRef = useRef();
   useEffect (() => {
   cloudinaryRef.current = langas.debesuota;
   widgetRef.current = cloudinaryRef.current.createUploadWidget({
   debesies pavadinimas: „jūsų debesies pavadinimas“, 
   įkelti iš anksto nustatytas: „iš anksto nustatytas įkėlimo pavadinimas“
   }, (klaida, rezultatas) => { 
  konsolė.log (klaida, rezultatas)
   });
   }, []);

  Aukščiau pateiktas kodas sukuria nuorodą į objektą „Cloudinary“ ir įkėlimo valdiklį naudojant „useRef“ kabliuką. „useEffect Hook“ vieną kartą paleidžia kodą atgalinio skambučio viduje, kai komponentas prijungiamas. Tada inicijuojate valdiklį naudodami savo debesies pavadinimą ir įkeliate iš anksto nustatytą pavadinimą bei registruojate rezultatus ir klaidas, kurios gali atsirasti naudojant valdiklį.
• Galiausiai sukurkite mygtuką, kurį spustelėjus bus iškviestas ir atidaromas įkėlimo valdiklis.

   widgetRef.current.open()} >
   Įkelti per valdiklį
  </button>

Išnaudokite visas debesuotumo galimybes

„Cloudinary“ suteikia vartotojui patogų sprendimą, kuris supaprastina vaizdo failų ir kitų medijos išteklių valdymo procesą.

Be debesų saugojimo platformos, „Cloudinary“ taip pat siūlo tokias funkcijas kaip vaizdo transformacijos ir vaizdo optimizavimas. Tai yra būtini įrankiai jūsų medijos išteklių kokybei pagerinti.