Ako hostiť obrazové súbory na Cloudinary v aplikácii React

Obsah mnohých aplikácií závisí od webu. Hostením obrazových prostriedkov na cloudovej platforme tretej strany môžete zaistiť, aby k nim vaše aplikácie mali rýchly a efektívny prístup.

Okrem toho sa vyhnete nákladom na úložisko a šírku pásma, ktoré by ste museli vynaložiť na hosťovanie aktív pomocou lokálnych serverov. To je dôvod, prečo sú cloudové riešenia hostenia obrázkov, ako je Cloudinary, čoraz populárnejšie.

Postupujte podľa pokynov a zistite, ako používať Cloudinary na hosťovanie obrázkov.

Čo je to hosting obrázkov a prečo je to dôležité?

Hosting obrázkov je typ webhostingovej služby, ktorá vám umožňuje ukladať a pristupovať k vašim obrázkovým aktívam alebo iným digitálnym médiám na cloudovej platforme tretej strany.

Mediálne prostriedky, ako sú obrázky, sú nevyhnutné na vytvorenie skvelého používateľského zážitku pre akúkoľvek webovú aplikáciu. Služby hostenia obrázkov vám uľahčia nahrávanie, ukladanie, získavanie a správu vašich aktív z cloudu, následne zvýšite výkon vašej aplikácie zabezpečením rýchlejších časov načítania a lepšieho obrazu kvalitu.

Čo je oblačnosť?

Cloudinary je cloudová platforma na správu médií. Poskytuje funkcie, ktoré vám uľahčia nahrávanie, ukladanie a správu digitálnych mediálnych aktív, ako sú obrázky a videá. Cloudinary v podstate uľahčuje správu všetkých vašich digitálnych médií potrebných pre akúkoľvek aplikáciu z jednej platformy.

Nastavte projekt Cloudinary na hosťovanie obrázkových súborov

Ak chcete začať s nahrávaním a hosťovaním obrazových súborov, zaregistrujte sa do a Oblačno účtu.

Prihláste sa do hlavného panela svojho účtu a kliknite na kartu s ikonou nastavení na ľavej table ponuky.

Na stránke nastavení kliknite na Nahrať otvorte stránku s nastaveniami nahrávania.

Teraz prejdite na Nahrajte predvoľby sekciu nastavení a kliknite na Pridať predvoľbu nahrávania vytvorte novú predvoľbu nahrávania pre vašu aplikáciu.

Predvoľba nahrávania je konfigurácia parametrov, ktoré definujú predvolenú štruktúru akéhokoľvek mediálneho súboru, ktorý nahráte na Cloudinary. Umožňujú vám definovať súbor pravidiel, ktoré sa použijú pri každom nahrávaní mediálneho súboru.

Prednastavené parametre zabezpečujú, že Cloudinary optimalizuje všetky mediálne súbory na doručenie do vašej aplikácie, zlepšuje výkon a skracuje čas načítania.

Vyplňte názov vašej predvoľby a vyberte nepodpísané režimu zo zobrazenej rozbaľovacej ponuky. Režimy podpisovania vám umožňujú určiť metódy, ktoré Cloudinary používa na autentifikáciu a autorizáciu nahrávania médií.

Výber nepodpísaného režimu vám umožní nahrávať do vášho úložiska Cloudinary z vašich aplikácií bez overovania pomocou Cloudinary. Jednoducho povedané, tento režim vám umožňuje vybrať obrázok a nahrať ho priamo z vašej aplikácie. Cloudinary ho potom na požiadanie doručí.

Po vykonaní týchto zmien pokračujte a kliknite Uložiť na vytvorenie predvoľby nahrávania.

Vytvorte aplikáciu Demo React

Môžete si nastaviť jednoduchú aplikáciu React, ktorá zvládne funkciu nahrávania pomocou koncového bodu Cloudinary API a miniaplikácie nahrávania.

Začať, vytvorte demo aplikáciu React. Potom spustite príkaz uvedený nižšie, čím spustíte vývojový server a prejdite naň http://localhost: 3000 vo vašom prehliadači, aby ste videli výsledky.

npm štart

Potom spustite tento príkaz a nainštalujte Axios, knižnicu JavaScript používanú na vytváranie požiadaviek HTTP z prehliadača.

npm nainštalujte axios

Nahrajte súbory obrázkov pomocou koncového bodu Cloudinary API

Po nastavení aplikácie React vytvorte komponent nahrávania, ktorý odošle požiadavku POST do koncového bodu API Cloudinary na nahranie obrázkových súborov do cloudového úložiska Cloudinary. Potom zničíte štruktúru odpovede API, aby ste zobrazili nahraný obrázok.

Vytvorte komponent nahrávania

V adresári /src vytvorte nový priečinok a pomenujte ho, komponenty. V tomto priečinku vytvorte nový súbor Upload.js.

Do súboru Upload.js pridajte kód nižšie:

importovať Reagovať, {useState} od'reagovať';
importovať Axios od"axios";
funkciuNahrať() {
konšt [uploadFile, setUploadFile] = useState("");
konšt [cloudinaryImage, setCloudinaryImage] = useState("")
konšt handleUpload = (e) => {
 e.preventDefault();
konšt formData = Nový FormData ();
 formData.append("súbor", Nahrajte súbor);
 formData.append("upload_preset", "názov prednastaveného nahrávania");
 Axios.post(
" https://api.cloudinary.com/v1_1/your Názov/obrázok/odovzdať cloudinary cloud",
 formData
 )
 .potom((odpoveď) => {
konzoly.log (odpoveď);
 setCloudinaryImage (response.data.secure_url);
 })
 .catch((chyba) => {
konzoly.log (chyba);
 });
 };
vrátiť ( 
"aplikácia"> 
"ľavá strana"> 


 Nahrajte obrázky do cloudového úložiska Cloudinary</h3>


"súbor"
 onChange ={(event) => {setUploadFile (event.target.files[0]);}} 
 />
 </div>
 Nahrať súbor</button>
 </form> 
 </section>
"pravá strana">
Výsledný obrázok sa zobrazí tu</h3>
 {cloudinaryImage && ( <imgsrc={cloudinaryImage} /> )}
 </section>
 </div>
 );
} 
exportpredvolená Nahrať;

Čo robí nahrávací kód:

• Deklaruje dva štáty, Nahrajte súbor a cloudinaryImage. Používa ich na uloženie nahraného súboru a výsledného obrázka z Cloudinary.
• Vstupné pole vám umožňuje vybrať obrazový súbor zo systému súborov vášho zariadenia. Keď vyberiete súbor, aktualizuje hodnotu premennej uploadFile.
• The rukoväťNahrať funkcia používa Axios na odoslanie žiadosti o príspevok do Cloudinary. Prechádza v nahranom súbore a predvoľbe nahrávania, ktoré ste priradili k svojmu cloudovému účtu Cloudinary. Túto funkciu vyvoláte kliknutím na tlačidlo Odoslať.
• Keď kód dostane odpoveď, uloží secure_url oblačného obrazu v stave.
• Nakoniec vykreslí dve sekcie, jednu na nahranie súboru a druhú na zobrazenie výsledného obrázka.

Importujte a vykreslite komponent upload.js vo svojom súbore app.js. Keď vyberiete a nahráte súbor obrázka, vo vašom prehliadači by sa mala zobraziť takáto odpoveď:

Prejdite do svojho účtu Cloudinary a kliknite na Knižnica médií pre zobrazenie nahraného súboru.

Integrácia widgetu Cloudinary do vašej aplikácie React výrazne zjednodušuje proces nahrávania. Okrem toho vám miniaplikácia umožňuje nahrávať obrazové súbory z rôznych zdrojov, ako je napríklad Dropbox.

Ak chcete integrovať miniaplikáciu do vašej aplikácie React, musíte najprv zahrnúť vzdialenú knižnicu JavaScript miniaplikácie do súboru index.html v adresári /public. Pridajte značku skriptu nižšie do sekcie head vo svojom súbore index.html.

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

Potom do súboru upload.js pridajte a vykonajte nasledujúce zmeny:

• Importujte nasledovné Reagovať háčiky: použitieÚčinok a použitieRef.

  importovať {useState, useEffect, useRef} od'reagovať';

• Pridajte kód nižšie:

  konšt cloudinaryRef = useRef();
  konšt widgetRef = useRef();
   useEffect(() => {
   cloudinaryRef.current = okno.oblačno;
   widgetRef.current = cloudinaryRef.current.createUploadWidget({
   názov cloudu: „názov vášho cloudinárneho cloudu“, 
   uploadPreset: „názov predvoľby nahrávania“
   }, (chyba, výsledok) => { 
  konzoly.log (chyba, výsledok)
   });
   }, []);

  Vyššie uvedený kód vytvára odkaz na objekt Cloudinary a miniaplikáciu nahrávania pomocou háku useRef. Hák useEffect spustí kód vo vnútri spätného volania raz, keď sa komponent pripojí. Potom miniaplikáciu inicializujete pomocou názvu cloudu a nahráte prednastavený názov a zaznamenáte výsledky a chyby, ktoré sa môžu z miniaplikácie vyskytnúť.
• Nakoniec vytvorte tlačidlo, ktoré po kliknutí vyvolá a otvorí miniaplikáciu nahrávania.

   widgetRef.current.open()} >
   Nahrať cez widget
  </button>

Ako vyťažiť maximum z Cloudinary

Cloudinary poskytuje užívateľsky prívetivé riešenie, ktoré zjednodušuje proces správy obrazových súborov a iných mediálnych aktív.

Okrem poskytovania platformy cloudového úložiska ponúka Cloudinary aj funkcie, ako sú transformácie obrázkov a optimalizácia obrázkov. Toto sú základné nástroje na zvýšenie kvality vašich mediálnych aktív.