Čtenáři jako vy pomáhají podporovat MUO. Když provedete nákup pomocí odkazů na našich stránkách, můžeme získat provizi přidružené společnosti. Přečtěte si více.

Obsah mnoha aplikací závisí na webu. Hostováním obrazových prostředků na cloudové platformě třetí strany můžete zajistit, aby k nim vaše aplikace měly rychlý a efektivní přístup.

Kromě toho se vyhnete nákladům na úložiště a šířku pásma, které byste museli vynaložit na hostování aktiv pomocí místních serverů. To je důvod, proč jsou cloudová řešení pro hostování obrázků, jako je Cloudinary, stále populárnější.

Postupujte podle pokynů a zjistěte, jak používat Cloudinary k hostování vašich obrazových dat.

Co je to hosting obrázků a proč je to důležité?

Hosting obrázků je typ webhostingové služby, která vám umožňuje ukládat a přistupovat k vašim obrázkům nebo jiným digitálním médiím na cloudové platformě třetí strany.

Mediální prostředky, jako jsou obrázky, jsou zásadní pro vytváření skvělé uživatelské zkušenosti pro jakoukoli webovou aplikaci. Služby hostování obrázků vám usnadňují nahrávání, ukládání, načítání a správu vašich aktiv z cloudu, v důsledku toho zvýšíte výkon vaší aplikace tím, že zajistíte rychlejší načítání a lepší obraz kvalitní.

instagram viewer

Co je Cloudinary?

Cloudinary je cloudová platforma pro správu médií. Poskytuje funkce, které vám usnadní nahrávání, ukládání a správu digitálních médií, jako jsou obrázky a videa. Cloudinary v podstatě usnadňuje správu všech vašich digitálních médií potřebných pro jakoukoli aplikaci z jedné platformy.

Nastavte projekt Cloudinary pro hostování obrazových souborů

Chcete-li začít s nahráváním a hostováním obrazových souborů, zaregistrujte se do a Oblačno účet.

Přihlaste se do řídicího panelu svého účtu a klikněte na záložku ikony nastavení v levém podokně nabídky.

Na stránce nastavení klikněte na nahrát otevřete stránku nastavení nahrávání.

Nyní přejděte k Nahrajte předvolby sekce nastavení a klikněte na Přidat předvolbu nahrávání pro vytvoření nové předvolby nahrávání pro vaši aplikaci.

Přednastavení nahrávání je konfigurace parametrů, které definují výchozí strukturu jakéhokoli mediálního souboru, který nahrajete na Cloudinary. Umožňují vám definovat sadu pravidel, která se použijí pokaždé, když nahrajete mediální soubor.

Přednastavené parametry zajišťují, že Cloudinary optimalizuje všechny mediální soubory pro doručení do vaší aplikace, zlepšuje výkon a zkracuje dobu načítání.

Vyplňte název vaší předvolby a vyberte nepodepsaný režimu ze zobrazené rozevírací nabídky. Režimy podepisování vám umožňují určit metody, které Cloudinary používá k ověřování a autorizaci veškerých nahrávání médií.

Výběr nepodepsaného režimu vám umožní nahrávat do vašeho úložiště Cloudinary z vašich aplikací bez ověřování pomocí Cloudinary. Jednoduše řečeno, tento režim vám umožňuje vybrat obrázek a nahrát jej přímo z vaší aplikace. Cloudinary jej pak na požádání dodá.

Po provedení těchto změn pokračujte a klikněte Uložit pro vytvoření předvolby nahrávání.

Vytvořte aplikaci Demo React

Můžete nastavit jednoduchou aplikaci React, která zvládne funkci nahrávání pomocí koncového bodu Cloudinary API a widgetu nahrávání.

Začít, vytvořit demo aplikaci React. Dále spusťte níže uvedený příkaz, abyste roztočili vývojový server a přejděte na něj http://localhost: 3000 ve vašem prohlížeči, abyste viděli výsledky.

npm start

Dále spusťte tento příkaz a nainstalujte Axios, knihovnu JavaScript používanou k vytváření požadavků HTTP z prohlížeče.

npm nainstalovat axios

Nahrajte soubory obrázků pomocí Cloudinary API Endpoint

Po nastavení aplikace React vytvořte komponentu pro nahrávání, která odešle požadavek POST na koncový bod API Cloudinary k nahrání souborů obrázků na cloudové úložiště Cloudinary. Poté destruujete odpověď API, abyste zobrazili nahraný obrázek.

Vytvořte komponentu pro nahrávání

V adresáři /src vytvořte novou složku a pojmenujte ji, komponenty. V této složce vytvořte nový soubor Upload.js.

Do souboru Upload.js přidejte kód níže:

import Reagovat, {useState} z'reagovat';
import Axios z"axios";
funkcenahrát() {
konst [uploadFile, setUploadFile] = useState("");
konst [cloudinaryImage, setCloudinaryImage] = useState("")


konst handleUpload = (E) => {
 e.preventDefault();
konst formData = Nový FormData ();
 formData.append("soubor", nahrát soubor);
 formData.append("upload_preset", "vaše přednastavené jméno pro nahrávání");


 Axios.post(
" https://api.cloudinary.com/v1_1/your Název/obrázek/nahrání cloudinary cloud",
 formData
 )
 .pak((Odezva) => {
řídicí panel.log (odpověď);
 setCloudinaryImage (response.data.secure_url);
 })
 .chytit((chyba) => {
řídicí panel.log (chyba);
 });
 };
vrátit se ( 
"Aplikace"> 
"levá strana"> 


 Nahrajte obrázky do Cloudinary Cloud Storage</h3>


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

Co dělá nahrávací kód:

  • deklaruje dva státy, nahrát soubor a cloudinaryImage. Ty používá k uložení nahraného souboru a výsledného obrázku z Cloudinary.
  • Vstupní pole vám umožňuje vybrat obrazový soubor ze systému souborů vašeho počítače. Když vyberete soubor, aktualizuje hodnotu proměnné uploadFile.
  • The handleUpload funkce používá Axios k odeslání požadavku na příspěvek do Cloudinary. Odešle se do nahraného souboru a přednastavení nahrávání, které jste přiřadili ke svému cloudovému účtu Cloudinary. Tuto funkci vyvoláte kliknutím na tlačítko Odeslat.
  • Když kód obdrží odpověď, uloží secure_url snímku Cloudinary ve stavu.
  • Nakonec vykreslí dvě sekce, jednu pro nahrání souboru a druhou pro zobrazení výsledného obrázku.

Importujte a vykreslete komponentu upload.js do souboru app.js. Jakmile vyberete a nahrajete soubor obrázku, měli byste ve svém prohlížeči vidět odpověď, jako je tato:

Přejděte na svůj účet Cloudinary a klikněte na Knihovna médií kartu pro zobrazení nahraného souboru.

Integrace widgetu Cloudinary do vaší aplikace React výrazně zjednodušuje proces nahrávání. Widget navíc umožňuje nahrávat soubory obrázků z různých zdrojů, jako je Dropbox.

Chcete-li integrovat widget do vaší aplikace React, musíte nejprve zahrnout vzdálenou knihovnu JavaScript widgetu do souboru index.html v adresáři /public. Přidejte značku skriptu níže do sekce head v souboru index.html.

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

Dále do souboru upload.js přidejte a proveďte následující změny:

  • Importujte následující Reagovat háčky: použitíÚčinek a použitíRef. 
    import {useState, useEffect, useRef} z'reagovat';
  • Přidejte níže uvedený kód: 
    konst cloudinaryRef = useRef();
    konst widgetRef = useRef();
     useEffect(() => {
     cloudinaryRef.current = okno.oblačno;
     widgetRef.current = cloudinaryRef.current.createUploadWidget({
     cloudName: 'název vašeho cloudinárního cloudu', 
     uploadPreset: 'název předvolby nahrávání'
     }, (chyba, výsledek) => { 
    řídicí panel.log (chyba, výsledek)
     });
     }, []);
    Výše uvedený kód vytvoří odkaz na objekt Cloudinary a widget pro nahrávání pomocí háčku useRef. Hák useEffect spustí kód uvnitř zpětného volání jednou, když se komponenta připojí. Poté widget inicializujete pomocí názvu svého cloudu a nahrajete přednastavený název a zaznamenáte výsledky a chyby, které se mohou z widgetu vyskytnout.
  • Nakonec vytvořte tlačítko, které po kliknutí vyvolá a otevře widget pro nahrávání.

Získejte maximum z Cloudinary

Cloudinary poskytuje uživatelsky přívětivé řešení, které zjednodušuje proces správy obrazových souborů a dalších mediálních prostředků.

Kromě poskytování platformy cloudového úložiště nabízí Cloudinary také funkce, jako jsou transformace obrázků a optimalizace obrázků. Toto jsou základní nástroje pro zvýšení kvality vašich mediálních aktiv.