Kā mitināt attēlu failus pakalpojumā Cloudinary lietojumprogrammā React

Daudzu lietojumprogrammu saturs ir atkarīgs no tīmekļa. Mitinot attēlu līdzekļus trešās puses mākoņa platformā, varat nodrošināt, ka jūsu lietotnēm ir ātra un efektīva piekļuve tiem.

Turklāt jūs izvairīsities no krātuves un joslas platuma izmaksām, kas jums rastos, mitinot aktīvus, izmantojot lokālos serverus. Tāpēc attēlu mitināšanas mākoņa risinājumi, piemēram, Cloudinary, ir kļuvuši arvien populārāki.

Sekojiet līdzi, lai uzzinātu, kā izmantot Cloudinary attēlu līdzekļu mitināšanai.

Kas ir attēlu mitināšana un kāpēc tas ir svarīgi?

Attēlu mitināšana ir tīmekļa mitināšanas pakalpojuma veids, kas ļauj saglabāt un piekļūt saviem attēlu līdzekļiem vai citiem digitālajiem medijiem trešās puses mākoņa platformā.

Multivides līdzekļi, piemēram, attēli, ir būtiski, lai radītu lielisku lietotāja pieredzi jebkurai tīmekļa lietojumprogrammai. Attēlu mitināšanas pakalpojumi ļauj ērti augšupielādēt, uzglabāt, izgūt un pārvaldīt savus līdzekļus no mākoņa, līdz ar to uzlabojot lietojumprogrammas veiktspēju, nodrošinot ātrāku ielādes laiku un labāku attēlu kvalitāti.

Kas ir mākoņains?

Cloudinary ir uz mākoņiem balstīta multivides pārvaldības platforma. Tas nodrošina funkcijas, kas atvieglo digitālo multivides līdzekļu, piemēram, attēlu un video, augšupielādi, glabāšanu un pārvaldību. Būtībā Cloudinary atvieglo visu jūsu digitālo multivides pārvaldību, kas nepieciešama jebkurai lietojumprogrammai no vienas platformas.

Iestatiet mākoņainu projektu attēlu failu mitināšanai

Lai sāktu ar attēlu failu augšupielādi un mitināšanu, reģistrējieties a Mākoņains konts.

Piesakieties sava konta informācijas panelī un kreisajā izvēlnes rūtī noklikšķiniet uz iestatījumu ikonas cilnes.

Iestatījumu lapā noklikšķiniet uz Augšupielādēt pogu, lai atvērtu augšupielādes iestatījumu lapu.

Tagad dodieties uz Augšupielādējiet sākotnējos iestatījumus iestatījumu sadaļu un noklikšķiniet uz Pievienojiet augšupielādes sākotnējo iestatījumu lai savai lietojumprogrammai izveidotu jaunu augšupielādes sākotnējo iestatījumu.

Augšupielādes priekšiestatījums ir parametru konfigurācija, kas nosaka jebkura multivides faila noklusējuma struktūru, ko augšupielādējat pakalpojumā Cloudinary. Tie ļauj definēt noteikumu kopu, kas jāpiemēro ikreiz, kad augšupielādējat multivides failu.

Iepriekš iestatītie parametri nodrošina, ka Cloudinary optimizē visus multivides failus piegādei jūsu lietojumprogrammai, uzlabojot veiktspēju un samazinot ielādes laiku.

Ievadiet sākotnējā iestatījuma nosaukumu un atlasiet neparakstīts režīmā parādītajā nolaižamajā izvēlnē. Parakstīšanas režīmi ļauj norādīt metodes, ko Cloudinary izmanto, lai autentificētu un autorizētu visas multivides augšupielādes.

Atlasot neparakstīto režīmu, varēsit augšupielādēt savu Cloudinary krātuvi no savām lietojumprogrammām, neveicot autentifikāciju ar Cloudinary. Vienkārši sakot, šis režīms ļauj atlasīt attēlu un augšupielādēt to tieši no lietojumprogrammas. Pēc pieprasījuma Cloudinary to piegādās.

Pēc šo izmaiņu veikšanas turpiniet un noklikšķiniet uz Saglabāt lai izveidotu augšupielādes sākotnējo iestatījumu.

Izveidojiet Demo React lietojumprogrammu

Varat iestatīt vienkāršu React lietojumprogrammu, lai apstrādātu augšupielādes funkcionalitāti, izmantojot Cloudinary API galapunktu un augšupielādes logrīku.

Lai sāktu, izveidot demonstrācijas React lietojumprogrammu. Pēc tam palaidiet tālāk norādīto komandu, lai atvērtu izstrādes serveri un pārietu uz http://localhost: 3000 savā pārlūkprogrammā, lai skatītu rezultātus.

npm sākums

Pēc tam palaidiet šo komandu, lai instalētu Axios — JavaScript bibliotēku, ko izmanto HTTP pieprasījumu veikšanai no pārlūkprogrammas.

npm instalēt axios

Augšupielādējiet attēlu failus, izmantojot Cloudinary API galapunktu

Pēc lietotnes React iestatīšanas izveidojiet augšupielādes komponentu, kas veic POST pieprasījumu Cloudinary API galapunktam, lai augšupielādētu attēlu failus Cloudinary mākoņkrātuvē. Pēc tam jūs iznīcināsit API atbildi, lai parādītu augšupielādēto attēlu.

Izveidojiet augšupielādes komponentu

Direktorijā /src izveidojiet jaunu mapi un nosauciet to par komponentiem. Šajā mapē izveidojiet jaunu failu Upload.js.

Failā Upload.js pievienojiet tālāk norādīto kodu:

imports Reaģējiet, {useState} no'reaģēt';
imports Axios no"aksios";
funkcijuAugšupielādēt() {
konst [uploadFile, setUploadFile] = useState("");
konst [cloudinaryImage, setCloudinaryImage] = useState("")
konst handupload = (e) => {
 e.preventDefault();
konst formData = jauns FormData ();
 formData.append("fails", uploadFile);
 formData.append("upload_preset", "jūsu augšupielādes iepriekš iestatītais nosaukums");
 Axios.post(
" https://api.cloudinary.com/v1_1/your Mākoņainā mākoņa nosaukums/attēls/augšupielāde",
 formData
 )
 .hen((atbildi) => {
konsole.log (atbilde);
 setCloudinaryImage (response.data.secure_url);
 })
 .catch((kļūda) => {
konsole.log (kļūda);
 });
 };
atgriezties ( 
"Lietotne"> 
"kreisā puse"> 


 Augšupielādējiet attēlus Cloudinary Cloud Storage</h3>


"fails"
 onChange ={(event) => {setUploadFile (event.target.files[0]);}} 
 />
 </div>
 Augšupielādēt failu</button>
 </form> 
 </section>
"labā puse">
Iegūtais attēls tiks parādīts šeit</h3>
 {cloudinaryImage && ( <imgsrc={cloudinaryImage} /> )}
 </section>
 </div>
 );
} 
eksportētnoklusējuma Augšupielādēt;

Lūk, ko veic augšupielādes kods:

• deklarē divas valstis, augšupielādes fails un mākoņainsAttēls. Tas izmanto tos, lai saglabātu augšupielādēto failu un iegūto attēlu no Cloudinary.
• Ievades lauks ļauj atlasīt attēla failu no ierīces failu sistēmas. Atlasot failu, tas atjaunina mainīgā uploadFile vērtību.
• The rokturisAugšupielādēt funkcija izmanto Axios, lai Cloudinary nosūtītu ziņas pieprasījumu. Tas tiek nodots augšupielādētajā failā un augšupielādes priekšiestatījumā, ko esat saistījis ar savu Cloudinary mākoņa kontu. Noklikšķinot uz pogas Iesniegt, šī funkcija tiek izsaukta.
• Kad kods saņem atbildi, tas saglabā drošs_url no mākoņainā attēla stāvoklī.
• Visbeidzot, tas atveido divas sadaļas, viena faila augšupielādei un otra iegūtā attēla parādīšanai.

Importējiet un renderējiet komponentu upload.js failā app.js. Kad esat atlasījis un augšupielādējis attēla failu, pārlūkprogrammā vajadzētu redzēt šādu atbildi:

Dodieties uz savu Cloudinary kontu un noklikšķiniet uz Mediju bibliotēka cilni, lai skatītu augšupielādēto failu.

Cloudinary logrīka integrēšana React lietojumprogrammā ievērojami vienkāršo augšupielādes procesu. Turklāt logrīks ļauj augšupielādēt attēlu failus no dažādiem avotiem, piemēram, Dropbox.

Lai integrētu logrīku savā React lietotnē, vispirms ir jāiekļauj logrīka attālā JavaScript bibliotēka failā index.html /public direktorijā. Pievienojiet tālāk redzamo skripta tagu sava index.html faila galvas sadaļā.

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

Pēc tam failā upload.js pievienojiet un veiciet šādas izmaiņas:

• Importējiet tālāk norādīto Reaģēt āķi: useEffect un useRef.

  imports {useState, useEffect, useRef} no'reaģēt';

• Pievienojiet kodu zemāk:

  konst cloudinaryRef = useRef();
  konst widgetRef = useRef();
   useEffect(() => {
   cloudinaryRef.current = logs.mākoņains;
   widgetRef.current = cloudinaryRef.current.createUploadWidget({
   cloudName: "jūsu mākoņainā mākoņa vārds", 
   augšupielādes priekšiestatījums: 'augšupielādes priekšiestatījuma nosaukums'
   }, (kļūda, rezultāts) => { 
  konsole.log (kļūda, rezultāts)
   });
   }, []);

  Iepriekš minētais kods izveido atsauci uz Cloudinary objektu un augšupielādes logrīku, izmantojot āķi useRef. UseEffect āķis vienu reizi palaiž kodu atzvanīšanas iekšpusē, kad komponents ir uzstādīts. Pēc tam jūs inicializējat logrīku, izmantojot mākoņa nosaukumu un augšupielādes iepriekš iestatīto nosaukumu, kā arī reģistrējat rezultātus un kļūdas, kas var rasties no logrīka.
• Visbeidzot izveidojiet pogu, uz kuras noklikšķinot, tiks izsaukts un atvērts augšupielādes logrīks.

   widgetRef.current.open()} >
   Augšupielādēt, izmantojot logrīku
  </button>

Pilnīga mākoņu izmantošana

Cloudinary nodrošina lietotājam draudzīgu risinājumu, kas vienkāršo attēlu failu un citu multivides līdzekļu pārvaldības procesu.

Papildus mākoņa krātuves platformai Cloudinary piedāvā arī tādas funkcijas kā attēlu transformācijas un attēlu optimizācija. Šie ir būtiski rīki, lai uzlabotu jūsu multivides līdzekļu kvalitāti.