Képfájlok tárolása a Cloudinary-ban egy React alkalmazásban

Sok alkalmazás tartalma a webtől függ. Ha a képelemeket harmadik féltől származó felhőplatformon tárolja, akkor biztosíthatja, hogy alkalmazásai gyorsan és hatékonyan hozzáférjenek hozzájuk.

Ezen túlmenően elkerülheti azokat a tárolási és sávszélességi költségeket, amelyek az eszközök helyszíni szerverek használatával történő üzemeltetésével kapcsolatban merülnének fel. Ezért váltak egyre népszerűbbé az olyan képtárhely felhőmegoldások, mint a Cloudinary.

Kövesse a lépést, hogy megtudja, hogyan használhatja a Cloudinaryt képelemei tárolására.

Mi az a képtárhely, és miért fontos?

A képtárhely egyfajta webtárhely-szolgáltatás, amely lehetővé teszi, hogy harmadik féltől származó felhőplatformon tárolja és elérje képtartalmait vagy más digitális médiát.

A médiaelemek, például a képek nélkülözhetetlenek a nagyszerű felhasználói élmény megteremtéséhez bármely webes alkalmazás számára. A képtárolási szolgáltatások megkönnyítik az eszközök feltöltését, tárolását, lekérését és kezelését a felhőből, következésképpen növeli az alkalmazás teljesítményét a gyorsabb betöltési idők és jobb képminőség biztosításával minőség.

Mi az a felhős?

A Cloudinary egy felhőalapú médiakezelési platform. Olyan funkciókat kínál, amelyek megkönnyítik a digitális médiaeszközök, például képek és videók feltöltését, tárolását és kezelését. A Cloudinary lényegében megkönnyíti az összes alkalmazáshoz szükséges digitális média kezelését egyetlen platformról.

Állítson be egy felhőalapú projektet képfájlok tárolására

A képfájlok feltöltésének és tárolásának megkezdéséhez iratkozzon fel a Felhős fiókot.

Jelentkezzen be fiókja irányítópultjára, és kattintson a beállítások ikon fülre a bal oldali menüpanelen.

A beállítások oldalon kattintson a gombra Feltöltés gombot a feltöltési beállítások oldal megnyitásához.

Most pedig irány a Előbeállítások feltöltése beállítások részt, és kattintson rá Feltöltési előbeállítás hozzáadása új feltöltési készlet létrehozásához az alkalmazáshoz.

A feltöltési előre beállított paraméterek konfigurációja, amelyek meghatározzák a Cloudinary-re feltöltött médiafájlok alapértelmezett szerkezetét. Lehetővé teszik, hogy meghatározzon egy szabálykészletet, amelyeket minden médiafájl feltöltésekor alkalmazni kell.

Az előre beállított paraméterek biztosítják, hogy a Cloudinary optimalizálja az összes médiafájlt az alkalmazáshoz való eljutáshoz, javítva a teljesítményt és csökkentve a betöltési időt.

Írja be az előre beállított beállítás nevét, és válassza ki aláírás nélküli módban a megjelenő legördülő menüből. Az aláírási módok lehetővé teszik a Cloudinary által a médiafeltöltések hitelesítésére és engedélyezésére használt módszerek meghatározását.

Az aláíratlan mód kiválasztása lehetővé teszi, hogy a Cloudinary-val történő hitelesítés nélkül töltsön fel Cloudinary-tárhelyére alkalmazásait. Egyszerűen fogalmazva, ez a mód lehetővé teszi egy kép kiválasztását, és közvetlenül az alkalmazásból való feltöltését. A Cloudinary kérésre szállítja.

A módosítások elvégzése után lépjen tovább, és kattintson Megment a feltöltési előbeállítás létrehozásához.

Hozzon létre egy Demo React alkalmazást

Beállíthat egy egyszerű React alkalmazást a feltöltési funkciók kezelésére a Cloudinary API végpont és a feltöltési widget használatával.

A kezdéshez hozzon létre egy demó React alkalmazást. Ezután futtassa az alábbi parancsot a fejlesztői kiszolgáló felpörgetéséhez, és navigáláshoz http://localhost: 3000 a böngészőjében az eredmények megtekintéséhez.

npm start

Ezután futtassa ezt a parancsot az Axios, egy JavaScript-könyvtár telepítéséhez, amelyet HTTP-kérések küldésére használnak a böngészőből.

npm install axios

Képfájlok feltöltése a Cloudinary API-végpont használatával

A React alkalmazás beállítása után hozzon létre egy feltöltési összetevőt, amely POST-kérést küld a Cloudinary API-végpontjához, hogy képfájlokat töltsön fel a Cloudinary felhőtárhelyre. Ezután megsemmisíti az API-választ a feltöltött kép megjelenítéséhez.

Hozzon létre egy feltöltési összetevőt

A /src könyvtárban hozzon létre egy új mappát, és nevezze el, összetevők. Ebben a mappában hozzon létre egy új Upload.js fájlt.

Adja hozzá az alábbi kódot az Upload.js fájlhoz:

import Reagálj, {useState} tól től'reagál';
import Axios tól től"axiók";
funkcióFeltöltés() {
const [uploadFile, setUploadFile] = useState("");
const [cloudinaryImage, setCloudinaryImage] = useState("")
const handleUpload = (e) => {
 e.preventDefault();
const formData = új FormData ();
 formData.append("fájl", fájl feltöltés);
 formData.append("upload_preset", "a feltöltési előre beállított neve");
 Axios.post(
" https://api.cloudinary.com/v1_1/your Felhős felhő neve/kép/feltöltés",
 formData
 )
 .akkor((válasz) => {
konzol.log (válasz);
 setCloudinaryImage (response.data.secure_url);
 })
 .fogás((hiba) => {
konzol.log (hiba);
 });
 };
Visszatérés ( 
"Alkalmazás"> 
"bal oldal"> 


 Tölts fel képeket a Cloudinary Cloud Storage-ba</h3>


"fájl"
 onChange ={(event) => {setUploadFile (event.target.files[0]);}} 
 />
 </div>
 Fájl feltöltése</button>
 </form> 
 </section>
"jobb oldal">
Az eredményül kapott kép itt jelenik meg</h3>
 {cloudinaryImage && ( <imgsrc={cloudinaryImage} /> )}
 </section>
 </div>
 );
} 
exportalapértelmezett Feltöltés;

A feltöltési kód feladata:

• Két államot hirdet, fájl feltöltés és felhősKép. Ezek segítségével tárolja a feltöltött fájlt és a kapott képet a Cloudinaryból.
• A beviteli mező lehetővé teszi egy képfájl kiválasztását a gép fájlrendszeréből. Amikor kiválaszt egy fájlt, az frissíti az uploadFile változó értékét.
• A handleFeltöltés függvény az Axios segítségével küld egy bejegyzési kérelmet a Cloudinarynak. Átadja a feltöltött fájlt és a Cloudinary felhőfiókjához társított feltöltési előre beállított értéket. A küldés gombra kattintva meghívja ezt a függvényt.
• Amikor a kód választ kap, eltárolja a biztonságos_url a Felhős kép állapotában.
• Végül két részt renderel, az egyiket a fájl feltöltésére, a másikat pedig a kapott kép megjelenítésére.

Importálja és jelenítse meg az upload.js összetevőt az app.js fájlban. A képfájl kiválasztása és feltöltése után a következőhöz hasonló választ kell látnia böngészőjében:

Nyissa meg Cloudinary-fiókját, és kattintson a gombra Médiakönyvtár fület a feltöltött fájl megtekintéséhez.

A Cloudinary widget integrálása a React alkalmazásba jelentősen leegyszerűsíti a feltöltési folyamatot. Ezenkívül a widget lehetővé teszi képfájlok feltöltését különböző forrásokból, például a Dropboxból.

Ha integrálni szeretné a modult a React alkalmazásba, először fel kell vennie a modul távoli JavaScript-könyvtárát az index.html fájlba a /public könyvtárban. Adja hozzá az alábbi szkriptcímkét az index.html fájl fejrészéhez.

<forgatókönyvsrc=" https://upload-widget.cloudinary.com/global/all.js"
 type="text/javascript">forgatókönyv>

Ezután az upload.js fájlban add meg a következő módosításokat:

• Importálja a következőket Reagálás horgok: useEffect és useRef.

  import {useState, useEffect, useRef} tól től'reagál';

• Adja hozzá az alábbi kódot:

  const cloudinaryRef = useRef();
  const widgetRef = useRef();
   useEffect(() => {
   cloudinaryRef.current = ablak.felhős;
   widgetRef.current = cloudinaryRef.current.createUploadWidget({
   cloudName: "felhőneved", 
   feltöltési előre beállított: "a feltöltési előre beállított név"
   }, (hiba, eredmény) => { 
  konzol.log (hiba, eredmény)
   });
   }, []);

  A fenti kód hivatkozást hoz létre a Cloudinary objektumra és a feltöltési widgetre a useRef hook segítségével. A useEffect hook egyszer lefuttatja a kódot a visszahíváson belül, amikor az összetevő felcsatolódik. Ezután inicializálja a widgetet a felhőnév és a feltöltött előre beállított név használatával, és naplózza a widgetből esetlegesen előforduló eredményeket és hibákat.
• Végül hozzon létre egy gombot, amelyre kattintva meghívja és megnyitja a feltöltési widgetet.

   widgetRef.current.open()} >
   Feltöltés Widgeten keresztül
  </button>

Hozza ki a legtöbbet a felhőből

A Cloudinary felhasználóbarát megoldást kínál, amely leegyszerűsíti a képfájlok és egyéb médiaeszközök kezelésének folyamatát.

A felhőalapú tárolási platformon kívül a Cloudinary olyan funkciókat is kínál, mint a képátalakítás és a képoptimalizálás. Ezek alapvető eszközök a médiatartalmak minőségének javításához.