आप जैसे पाठक MUO का समर्थन करने में मदद करते हैं। जब आप हमारी साइट पर लिंक का उपयोग करके खरीदारी करते हैं, तो हम संबद्ध कमीशन अर्जित कर सकते हैं। और पढ़ें।

कई एप्लिकेशन अपनी सामग्री के लिए वेब पर निर्भर हैं। तृतीय-पक्ष क्लाउड प्लेटफ़ॉर्म पर छवि संपत्तियों की मेजबानी करके, आप यह सुनिश्चित कर सकते हैं कि आपके ऐप्स के पास तेज़, कुशल पहुंच हो।

इसके अलावा, आप ऑन-प्रिमाइसेस सर्वर का उपयोग करके परिसंपत्तियों की मेजबानी करने वाले भंडारण और बैंडविड्थ लागतों से बचेंगे। यही कारण है कि इमेज-होस्टिंग क्लाउड सॉल्यूशंस जैसे क्लाउडिनरी तेजी से लोकप्रिय हो गए हैं।

अपनी छवि संपत्तियों को होस्ट करने के लिए क्लाउडिनरी का उपयोग कैसे करें, यह जानने के लिए आगे बढ़ें।

छवि होस्टिंग क्या है और यह महत्वपूर्ण क्यों है?

छवि होस्टिंग एक प्रकार की वेब होस्टिंग सेवा है जो आपको तृतीय-पक्ष क्लाउड प्लेटफ़ॉर्म पर अपनी छवि संपत्तियों या अन्य डिजिटल मीडिया को संग्रहीत करने और एक्सेस करने की अनुमति देती है।

किसी भी वेब एप्लिकेशन के लिए एक शानदार उपयोगकर्ता अनुभव बनाने के लिए मीडिया संपत्तियां जैसे छवियां आवश्यक हैं। छवि होस्टिंग सेवाएं आपके लिए क्लाउड से अपनी संपत्तियों को अपलोड, स्टोर, पुनर्प्राप्त और प्रबंधित करना आसान बनाती हैं, नतीजतन, तेजी से लोडिंग समय और बेहतर छवि सुनिश्चित करके अपने एप्लिकेशन के प्रदर्शन को बढ़ाएं गुणवत्ता।

instagram viewer

क्लाउडिनरी क्या है?

क्लाउडिनरी एक क्लाउड-आधारित मीडिया प्रबंधन मंच है। यह ऐसी सुविधाएँ प्रदान करता है जो आपके लिए छवियों और वीडियो जैसे डिजिटल मीडिया संपत्तियों को अपलोड, स्टोर और प्रबंधित करना आसान बनाती हैं। अनिवार्य रूप से, क्लाउडिनरी एक मंच से किसी भी एप्लिकेशन के लिए आवश्यक आपके सभी डिजिटल मीडिया को प्रबंधित करना आसान बनाता है।

छवि फ़ाइलों को होस्ट करने के लिए क्लाउडिनरी प्रोजेक्ट सेट अप करें

छवि फ़ाइलों को अपलोड और होस्ट करने के साथ आरंभ करने के लिए, एक के लिए साइन अप करें बादल खाता।

अपने खाते के डैशबोर्ड में लॉग इन करें और बाएं मेनू फलक पर सेटिंग आइकन टैब पर क्लिक करें।

सेटिंग पेज पर, पर क्लिक करें डालना अपलोड सेटिंग पेज खोलने के लिए बटन।

अब, पर जाएँ प्रीसेट अपलोड करें सेटिंग्स अनुभाग और पर क्लिक करें अपलोड प्रीसेट जोड़ें अपने एप्लिकेशन के लिए एक नया अपलोड प्रीसेट बनाने के लिए।

एक अपलोड प्रीसेट मापदंडों का एक विन्यास है जो आपके द्वारा क्लाउडिनरी पर अपलोड की जाने वाली किसी भी मीडिया फ़ाइल की डिफ़ॉल्ट संरचना को परिभाषित करता है। हर बार जब आप कोई मीडिया फ़ाइल अपलोड करते हैं तो वे आपको नियमों का एक सेट परिभाषित करने देते हैं।

प्रीसेट पैरामीटर यह सुनिश्चित करते हैं कि क्लाउडिनरी आपके एप्लिकेशन की डिलीवरी के लिए सभी मीडिया फ़ाइलों का अनुकूलन करती है, प्रदर्शन में सुधार करती है और लोड समय को कम करती है।

अपने प्रीसेट का नाम भरें और चुनें अहस्ताक्षरित प्रदर्शित ड्रॉप-डाउन मेनू से मोड। साइनिंग मोड आपको किसी भी मीडिया अपलोड को प्रमाणित और अधिकृत करने के लिए क्लाउडिनरी द्वारा उपयोग की जाने वाली विधियों को निर्दिष्ट करने की अनुमति देता है।

अहस्ताक्षरित मोड का चयन करने से आप क्लाउडिनरी के साथ प्रमाणित किए बिना अपने एप्लिकेशन से अपने क्लाउडिनरी स्टोरेज में अपलोड कर सकेंगे। सीधे शब्दों में कहें, यह मोड आपको एक छवि का चयन करने की अनुमति देता है, और इसे सीधे आपके एप्लिकेशन से अपलोड करता है। इसके बाद क्लाउडिनरी इसे अनुरोध पर डिलीवर करेगी।

उन परिवर्तनों को करने के बाद, आगे बढ़ें और क्लिक करें बचाना अपलोड प्रीसेट बनाने के लिए।

एक डेमो रिएक्ट एप्लिकेशन बनाएं

क्लाउडिनरी एपीआई एंडपॉइंट और अपलोड विजेट का उपयोग करके आप अपलोड कार्यक्षमता को संभालने के लिए एक सरल रिएक्ट एप्लिकेशन सेट कर सकते हैं।

प्रारंभ करना, एक डेमो रिएक्ट एप्लिकेशन बनाएं. अगला, विकास सर्वर को स्पिन करने और नेविगेट करने के लिए नीचे दी गई कमांड चलाएँ http://localhost: परिणाम देखने के लिए आपके ब्राउज़र पर 3000।

एनपीएम प्रारंभ

इसके बाद, ब्राउज़र से HTTP अनुरोध करने के लिए उपयोग की जाने वाली जावास्क्रिप्ट लाइब्रेरी Axios को स्थापित करने के लिए इस कमांड को चलाएँ।

एनपीएम अक्षीय स्थापित करें

क्लाउडिनरी एपीआई एंडपॉइंट का उपयोग करके छवि फ़ाइलें अपलोड करें

रिएक्ट ऐप को सेट करने के बाद, एक अपलोड कंपोनेंट बनाएं जो क्लाउडिनरी के एपीआई एंडपॉइंट को क्लाउडिनरी क्लाउड स्टोरेज पर छवि फ़ाइलों को अपलोड करने के लिए एक POST अनुरोध करता है। फिर आप अपलोड की गई छवि को प्रदर्शित करने के लिए एपीआई प्रतिक्रिया को नष्ट कर देंगे।

एक अपलोड घटक बनाएँ

/Src निर्देशिका में, एक नया फ़ोल्डर बनाएँ और इसे घटक नाम दें। इस फोल्डर में, एक नई फाइल अपलोड.जेएस बनाएं।

Upload.js फ़ाइल में, नीचे दिया गया कोड जोड़ें:

आयात प्रतिक्रिया, {useState} से'प्रतिक्रिया';
आयात Axios से"अक्षीय";
समारोहडालना() {
कॉन्स्ट [अपलोडफाइल, सेटअपलोडफाइल] = यूज़स्टेट ("");
कॉन्स्ट [क्लाउडिनरीइमेज, सेटक्लाउडिनरीइमेज] = यूज़स्टेट ("")


कॉन्स्ट हैंडलअपलोड = (इ) => {
 e.preventDefault ();
कॉन्स्ट फॉर्मडाटा = नया फॉर्मडाटा ();
 फॉर्मडाटा.एपेंड ("फ़ाइल", फ़ाइल अपलोड करें);
 फॉर्मडाटा.एपेंड ("upload_preset", "आपका अपलोड प्रीसेट नाम");


 Axios.post (
" https://api.cloudinary.com/v1_1/your क्लाउडिनरी क्लाउड नाम/छवि/अपलोड",
 फॉर्मडेटा
 )
 ।तब((जवाब) => {
सांत्वना देनालॉग (प्रतिक्रिया);
 setCloudinaryImage (response.data.secure_url);
 })
 ।पकड़ना((गलती) => {
सांत्वना देनालॉग (त्रुटि);
 });
 };
वापस करना ( 
"अनुप्रयोग"> 
"बाईं तरफ"> 


 क्लाउडिनरी क्लाउड स्टोरेज< में छवियां अपलोड करें/h3>


"फ़ाइल"
 onChange = {(ईवेंट) => {setUploadFile (event.target.files [0]);}} 
 />
 </div>

यहाँ अपलोड कोड क्या करता है:

  • दो राज्यों की घोषणा, फ़ाइल अपलोड करें और क्लाउडिनरीइमेज. यह इनका उपयोग क्लाउडिनरी से अपलोड की गई फ़ाइल और परिणामी छवि को संग्रहीत करने के लिए करता है।
  • इनपुट फ़ील्ड आपको अपने मशीन के फाइल सिस्टम से एक छवि फ़ाइल का चयन करने की अनुमति देता है। जब आप एक फ़ाइल का चयन करते हैं, तो यह अपलोडफाइल चर के मान को अपडेट करता है।
  • हैंडलअपलोड क्लाउडिनरी के लिए पोस्ट अनुरोध करने के लिए फ़ंक्शन Axios का उपयोग करता है। यह अपलोड की गई फ़ाइल और आपके क्लाउडिनरी क्लाउड खाते से संबद्ध अपलोड प्रीसेट में गुजरता है। सबमिट बटन पर क्लिक करने से यह फ़ंक्शन कॉल करता है।
  • जब कोड को प्रतिक्रिया मिलती है, तो यह स्टोर करता है सिक्योर_यूआरएल राज्य में बादलों की छवि।
  • अंत में, यह दो वर्गों को प्रस्तुत करता है, एक फ़ाइल अपलोड करने के लिए और दूसरा परिणामी छवि प्रदर्शित करने के लिए।

अपनी app.js फ़ाइल में upload.js कॉम्पोनेंट इम्पोर्ट और रेंडर करें। छवि फ़ाइल का चयन और अपलोड करने के बाद आपको अपने ब्राउज़र में इस तरह की प्रतिक्रिया दिखाई देनी चाहिए:

अपने क्लाउडिनरी खाते पर जाएं, और पर क्लिक करें मीडिया पुस्तकालय अपलोड की गई फ़ाइल को देखने के लिए टैब।

अपने रिएक्ट एप्लिकेशन में क्लाउडिनरी विजेट को एकीकृत करने से अपलोड प्रक्रिया काफी सरल हो जाती है। इसके अतिरिक्त, विजेट आपको ड्रॉपबॉक्स जैसे विभिन्न स्रोतों से छवि फ़ाइलों को अपलोड करने की अनुमति देता है।

अपने रिएक्ट ऐप में विजेट को एकीकृत करने के लिए, सबसे पहले, आपको अपनी index.html फ़ाइल में /public निर्देशिका में विजेट की दूरस्थ जावास्क्रिप्ट लाइब्रेरी को शामिल करना होगा। अपनी index.html फ़ाइल के हेड सेक्शन में नीचे स्क्रिप्ट टैग जोड़ें।

<लिखी हुई कहानीस्रोत=" https://upload-widget.cloudinary.com/global/all.js"
 प्रकार = "पाठ/जावास्क्रिप्ट">लिखी हुई कहानी>

इसके बाद, अपनी अपलोड.जेएस फ़ाइल में, निम्न परिवर्तन जोड़ें:

  • निम्नलिखित आयात करें प्रतिक्रिया हुक: प्रभाव का उपयोग करें और रेफरी का उपयोग करें। 
    आयात {useState, useEffect, useRef} से'प्रतिक्रिया';
  • कोड नीचे जोड़ें: 
    कॉन्स्ट क्लाउडिनरीफ = यूसेरफ ();
    कॉन्स्ट विजेटरफ = यूसेरफ ();
     उपयोग प्रभाव (() => {
     क्लाउडिनरीरेफ। वर्तमान = खिड़की.बादल;
     विजेटRef.current = CloudinaryRef.current.createUploadWidget ({
     क्लाउडनाम: 'आपका क्लाउडिनरी क्लाउड नाम', 
     अपलोड प्रीसेट: 'अपलोड प्रीसेट नाम'
     }, (त्रुटि, परिणाम) => { 
    सांत्वना देनालॉग (त्रुटि, परिणाम)
     });
     }, []);
    उपरोक्त कोड क्लाउडिनरी ऑब्जेक्ट और यूज़रीफ हुक का उपयोग करके अपलोड विजेट का संदर्भ बनाता है। कौम्पोनॅन्ट माउंट होने पर useEffect हुक कॉलबैक के अंदर कोड चलाता है। फिर आप अपने क्लाउड नाम का उपयोग करके विजेट को इनिशियलाइज़ करते हैं और प्रीसेट नाम अपलोड करते हैं और परिणामों और त्रुटियों को लॉग करते हैं जो विजेट से हो सकते हैं।
  • अंत में, एक बटन बनाएं, जिसे क्लिक करने पर, अपलोड विजेट खुल जाएगा और खुल जाएगा।

क्लाउडिनरी का अधिकतम लाभ उठाना

क्लाउडिनरी एक उपयोगकर्ता के अनुकूल समाधान प्रदान करता है जो छवि फ़ाइलों और अन्य मीडिया संपत्तियों के प्रबंधन की प्रक्रिया को सरल करता है।

क्लाउड स्टोरेज प्लेटफॉर्म प्रदान करने के अलावा, क्लाउडिनरी इमेज ट्रांसफॉर्मेशन और इमेज ऑप्टिमाइज़ेशन जैसी सुविधाएँ भी प्रदान करता है। ये आपकी मीडिया संपत्तियों की गुणवत्ता बढ़ाने के लिए आवश्यक उपकरण हैं।