Cititorii ca tine ajută la sprijinirea MUO. Când efectuați o achiziție folosind link-uri de pe site-ul nostru, este posibil să câștigăm un comision de afiliat. Citeşte mai mult.

Multe aplicații depind de web pentru conținutul lor. Găzduind elemente de imagine pe o platformă cloud terță parte, vă puteți asigura că aplicațiile dvs. au acces rapid și eficient la acestea.

În plus, veți evita costurile de stocare și lățime de bandă pe care le-ați suporta pentru găzduirea activelor folosind servere locale. Acesta este motivul pentru care soluțiile cloud de găzduire a imaginilor precum Cloudinary au devenit din ce în ce mai populare.

Urmăriți-vă pentru a afla cum să utilizați Cloudinary pentru a vă găzdui elementele de imagine.

Ce este găzduirea imaginilor și de ce este importantă?

Găzduirea imaginilor este un tip de serviciu de găzduire web care vă permite să stocați și să accesați materialele dvs. de imagine sau alte medii digitale pe o platformă cloud terță parte.

Activele media, cum ar fi imaginile, sunt esențiale pentru a crea o experiență excelentă de utilizator pentru orice aplicație web. Serviciile de găzduire a imaginilor vă facilitează încărcarea, stocarea, preluarea și gestionarea activelor dvs. din cloud, în consecință, îmbunătățirea performanței aplicației dvs. prin asigurarea unor timpi de încărcare mai rapidi și o imagine mai bună calitate.

instagram viewer

Ce este Cloudinary?

Cloudinary este o platformă de management media bazată pe cloud. Oferă funcții care vă facilitează încărcarea, stocarea și gestionarea activelor media digitale, cum ar fi imagini și videoclipuri. În esență, Cloudinary face mai ușor să gestionați toate mediile digitale necesare pentru orice aplicație de pe o singură platformă.

Configurați un proiect Cloudinary pentru a găzdui fișiere imagine

Pentru a începe să încărcați și să găzduiți fișiere imagine, înscrieți-vă pentru a Cloudinary cont.

Conectați-vă la tabloul de bord al contului și faceți clic pe fila pictogramă setări din panoul de meniu din stânga.

În pagina de setări, faceți clic pe Încărcați butonul pentru a deschide pagina de setări de încărcare.

Acum, du-te la Încărcați presetări secțiunea de setări și faceți clic pe Adăugați o presetare de încărcare pentru a crea o nouă presetare de încărcare pentru aplicația dvs.

O presetare de încărcare este o configurație de parametri care definesc structura implicită a oricărui fișier media pe care îl încărcați pe Cloudinary. Acestea vă permit să definiți un set de reguli de aplicat de fiecare dată când încărcați un fișier media.

Parametrii prestabiliți asigură că Cloudinary optimizează toate fișierele media pentru livrarea către aplicația dvs., îmbunătățind performanța și reducând timpul de încărcare.

Completați numele presetului și selectați nesemnat mod din meniul derulant afișat. Modurile de semnare vă permit să specificați metodele pe care le utilizează Cloudinary pentru a autentifica și autoriza orice încărcare media.

Selectarea modului nesemnat vă va permite să faceți încărcări în stocarea Cloudinary din aplicațiile dvs. fără a vă autentifica cu Cloudinary. Mai simplu spus, acest mod vă permite să selectați o imagine și să o încărcați direct din aplicația dvs. Cloudinary îl va livra apoi la cerere.

După ce faceți aceste modificări, mergeți mai departe și faceți clic Salvați pentru a crea presetarea de încărcare.

Creați o aplicație Demo React

Puteți configura o aplicație React simplă pentru a gestiona funcționalitatea de încărcare folosind punctul final API Cloudinary și widgetul de încărcare.

Pentru a incepe, creați o aplicație demonstrativă React. Apoi, rulați comanda de mai jos pentru a porni serverul de dezvoltare și pentru a naviga la http://localhost: 3000 pe browser pentru a vedea rezultatele.

npm start

Apoi, rulați această comandă pentru a instala Axios, o bibliotecă JavaScript folosită pentru a face solicitări HTTP din browser.

npm instalează axios

Încărcați fișiere imagine utilizând Cloudinary API Endpoint

După configurarea aplicației React, creați o componentă de încărcare care face o solicitare POST către punctul final API al Cloudinary pentru a încărca fișiere de imagine pe stocarea cloud Cloudinary. Apoi veți destructura răspunsul API pentru a afișa imaginea încărcată.

Creați o componentă de încărcare

În directorul /src, creați un folder nou și denumiți-l, componente. În acest folder, creați un fișier nou, Upload.js.

În fișierul Upload.js, adăugați codul de mai jos:

import Reacționează, {useState} din'reacţiona';
import Axios din"axios";
funcţieÎncărcați() {
const [uploadFile, setUploadFile] = useState("");
const [cloudinaryImage, setCloudinaryImage] = useState("")


const handleUpload = (e) => {
 e.preventDefault();
const formData = nou FormData ();
 formData.append("fişier", incarca fisier);
 formData.append("upload_preset", „numele dvs. presetat de încărcare”);


 Axios.post(
" https://api.cloudinary.com/v1_1/your Nume/imagine/încărcare nor cloudinary”,
 formData
 )
 .apoi((raspuns) => {
consolă.log (răspuns);
 setCloudinaryImage (response.data.secure_url);
 })
 .captură((eroare) => {
consolă.log (eroare);
 });
 };
întoarcere ( 
„Aplicație”> 
"partea stanga"> 


 Încărcați imagini în Cloudinary Cloud Storage</h3>


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

Iată ce face codul de încărcare:

  • Declară două state, incarca fisier și cloudinaryImage. Le folosește pentru a stoca fișierul încărcat și imaginea rezultată din Cloudinary.
  • Câmpul de introducere vă permite să selectați un fișier imagine din sistemul de fișiere al aparatului dumneavoastră. Când selectați un fișier, acesta actualizează valoarea variabilei uploadFile.
  • The handleUpload funcția folosește Axios pentru a face o cerere de postare către Cloudinary. Acesta trece în fișierul încărcat și presetarea de încărcare pe care le-ați asociat cu contul dvs. cloud Cloudinary. Făcând clic pe butonul de trimitere, se apelează această funcție.
  • Când codul primește un răspuns, acesta stochează secure_url a imaginii Cloudinary în stare.
  • În cele din urmă, redă două secțiuni, una pentru încărcarea fișierului și cealaltă pentru afișarea imaginii rezultate.

Importați și redați componenta upload.js în fișierul dvs. app.js. Ar trebui să vedeți un răspuns ca acesta în browser după ce selectați și încărcați fișierul imagine:

Mergeți la contul dvs. Cloudinary și faceți clic pe Biblioteca media pentru a vizualiza fișierul încărcat.

Integrarea widget-ului Cloudinary în aplicația dvs. React simplifică semnificativ procesul de încărcare. În plus, widget-ul vă permite să încărcați fișiere imagine din diverse surse, cum ar fi Dropbox.

Pentru a integra widget-ul în aplicația dvs. React, mai întâi, trebuie să includeți biblioteca JavaScript de la distanță a widget-ului în fișierul index.html din directorul /public. Adăugați eticheta de script de mai jos la secțiunea head din fișierul index.html.

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

Apoi, în fișierul upload.js, adăugați face următoarele modificări:

  • Importați următoarele Cârlige de reacție: useEffect și useRef. 
    import {useState, useEffect, useRef} din'reacţiona';
  • Adăugați codul de mai jos: 
    const cloudinaryRef = useRef();
    const widgetRef = useRef();
     useEffect(() => {
     cloudinaryRef.current = fereastră.innorat;
     widgetRef.current = cloudinaryRef.current.createUploadWidget({
     cloudName: „numele norului tău cloudinary”, 
     uploadPreset: „numele presetat de încărcare”
     }, (eroare, rezultat) => { 
    consolă.log (eroare, rezultat)
     });
     }, []);
    Codul de mai sus creează o referință la obiectul Cloudinary și widget-ul de încărcare folosind cârligul useRef. Cârligul useEffect rulează codul în interiorul callback-ului o dată când se montează componenta. Apoi inițializați widgetul folosind numele cloud și încărcați numele presetat și înregistrați rezultatele și erorile care ar putea apărea din widget.
  • În cele din urmă, creați un buton care, atunci când faceți clic, va invoca și deschide widget-ul de încărcare.

Profitați la maximum de Cloudinary

Cloudinary oferă o soluție ușor de utilizat, care simplifică procesul de gestionare a fișierelor de imagine și a altor active media.

Pe lângă furnizarea unei platforme de stocare în cloud, Cloudinary oferă și funcții precum transformările și optimizarea imaginii. Acestea sunt instrumente esențiale pentru îmbunătățirea calității materialelor dvs. media.