स्पंदन: कैसे क्लाउडिनरी में अपलोड करें

आवश्यक शर्तें

लेख का पालन करने के लिए आवश्यक उपकरण।

  • स्पंदन SDK।
  • Android Studio या VS कोड।
  • एमुलेटर या एक एंड्रॉइड डिवाइस

परिचय

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

  • क्लाउडिनरी एक कंपनी है जो क्लाउड-आधारित छवि और वीडियो प्रबंधन सेवाएं प्रदान करती है। यह उपयोगकर्ताओं को वेबसाइटों और ऐप्स के लिए छवियों और वीडियो को अपलोड, स्टोर, प्रबंधन, हेरफेर करने और वितरित करने में सक्षम बनाता है।

यह देखने का समय है कि यह जादू कैसे काम करता है।

प्रोजेक्ट टूल्स की स्थापना

सबसे पहले, आइए एक नई स्पंदन परियोजना बनाएं, अपने टर्मिनल पर निम्न कमांड चलाएँ।

स्पंदन बनाना up_to_cloudinary

हमारे पसंदीदा IDE पर प्रोजेक्ट खोलें।

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

Cloudinary तक साइन अप करें और यदि आपके पास पहले से कोई खाता है या साइन इन नहीं है तो साइनअप प्रक्रिया का पालन करें। सबसे पहले, आइए एक नई स्पंदन परियोजना बनाएं, अपने टर्मिनल पर निम्न कमांड चलाएँ।

आइए अपनी IDE पर वापस जाएं, और main.dart खोलें,

निम्नलिखित कोड के साथ हमारे पाड़ के शरीर को बदलें:

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

चलो गहराई से जाएं और हमारे फ़ंक्शन को लिखें जो हमारे अपलोडिंग को संभालेंगे। लेकिन पहले हमारे pubspec.yaml फ़ाइल में कुछ पैकेज स्थापित करें जिनकी आवश्यकता होगी।

image_picker: ^ 0.6.3 + 4

dio: ^ 3.0.9

लोडिंग: ^ 1.0.2

और हमारे टर्मिनल पर कमांड स्पंदन पब प्राप्त करें।

आइए प्रत्येक पैकेज के कार्य के बारे में बात करें और इसकी आवश्यकता क्यों है:

  • इमेज पिकर: यह पैकेज डिवाइस कैमरा और स्टोरेज के साथ बातचीत करने में हमारे एप्लिकेशन की मदद करता है।
  • डियो: फ्लटर चाइना द्वारा विकसित एक नेटवर्किंग लाइब्रेरी है। यह डार्ट के लिए एक शक्तिशाली Http क्लाइंट है, जो इंटरसेप्टर्स, ग्लोबल कॉन्फ़िगरेशन, फॉर्मडाटा, रिक्वेस्ट कैंसेलेशन, फाइल डाउनलोडिंग, कनेक्शनटाइमआउट आदि का समर्थन करता है।
  • Loading: यह बस हमें यह अहसास दिलाने में मदद करता है कि कुछ हो रहा है जबकि फाइलें कुछ हो रही हैं।

उन पैकेजों को जोड़ने और टिप्पणियों को हटाने के बाद हमारा pubspec.yaml जैसा दिखता है

हमारे main.dart पर वापस जा रहे हैं, इन पैकेजों को आयात करें ताकि हम उन्हें एक्सेस कर सकें और इसे नीचे इस्तेमाल कर सकें। हमारे main.dart के शीर्ष पर निम्न कोड जोड़ा गया

आयात 'पैकेज: image_picker / image_picker.dart';

आयात 'डार्ट: कन्वर्ट';

आयात 'पैकेज: dio / dio.dart';

आयात 'पैकेज: लोडिंग / loading.dart';

आयात 'पैकेज: लोडिंग / इंडिकेटर / बॉल_पुलसे_इंडिकेटर.डार्ट';

में गोताखोरी, चलो डिफ़ॉल्ट _incrementCounter के ठीक ऊपर एक विधि बनाते हैं

भविष्य का अपलोडइमेज () async {}

क्योंकि हम कुछ एपीआई कॉल करेंगे, जिससे हमें विधि को एक प्रकार देना होगा:

  • एक भविष्य का उपयोग संभावित मूल्य या त्रुटि का प्रतिनिधित्व करने के लिए किया जाता है, जो कि भविष्य में कुछ समय पर उपलब्ध होगा। फ्यूचर के रिसीवर कॉलबैक रजिस्टर कर सकते हैं जो उपलब्ध होने के बाद मूल्य या त्रुटि को संभालते हैं।

फंक्शन से पहले बस निम्नलिखित वेरिएबल्स को आइए

var imageUrl;

बूल isloading = false;

हमारी विधि के अंदर आइए निम्नलिखित कोड को जोड़कर छवि पिकर का उपयोग करें,

क्लाउडिन पर वापस जाएं, आशा करते हैं कि आप इस दोस्त के बारे में नहीं भूल गए हैं, हमें सबसे पहले हमारे क्लाउडिनरी डैशबोर्ड से अपना क्लाउडरी एपीआई बेस URL प्राप्त करना होगा और अपना अपलोड प्रीसेट सेट करना होगा जो हमें अपने खाते में अपलोड करने के लिए प्राधिकरण देगा, ऐसा करने के लिए आइए। नीचे दिए गए निर्देश

  • अपने क्रेडेंशियल के साथ अपने क्लाउडिन में लॉगिन करें> जहां आपके खाते का विवरण सूचीबद्ध है, उसके बगल में, विस्तार करने के लिए अधिक पर क्लिक करें, अपने एपीआई बेस URL की प्रतिलिपि बनाएं, निरंतर बनाएं जो आपके एपीआई बेस URL को रखेगा, स्ट्रिंग के अंत में भी जोड़ें / अपलोड करें। इसके अलावा, क्लाउड नाम पर ध्यान दें, यह उपयोगी होगा। हमारे कास्ट इस तरह दिखना चाहिए:

const url = "https://api.cloudinary.com/v1_1/****/upload";

  • सेटिंग पर क्लिक करें> अपलोड पर क्लिक करें> अपलोड प्रीसेट पर स्क्रॉल करें> ऐड अपलोड प्रीसेट पर क्लिक करें> इसे उपयुक्त नाम दें> सेव पर क्लिक करें

ऐसा करने के बाद, हमारे एपीआई कॉल को हमारी विधि में लिखें, निम्न कोड को विधि में जोड़ें:

हमने तीन गुणों के साथ एक प्रारूप तैयार किया:

  1. फ़ाइल: जिसमें MultipartFile.fromFile की मदद से Dio पैकेज से छवि गुण शामिल हैं और छवि के लिए पथ जो छवि-पिकर द्वारा चुना गया था
  2. प्रीसेट अपलोड करें
  3. बादल का नाम

हमने एक एपीआई अनुरोध भी किया और फॉर्मडाटा में पारित किया और एपीआई से प्राप्त प्रतिक्रिया से छवि को सेट किया।

हमारे समारोह अब लग रहा है:

निम्नलिखित कोड के साथ हमारे पाड़ शरीर को अद्यतन करें:

और चलिए अपने अपलोडइमेज फंक्शन को ऑनप्रेस्ड से लिंक करने के लिए मचान में फ्लोटिंगएशनबटन को अपडेट करें। निम्नलिखित कोड के साथ अद्यतन करें:

हमारे main.dart का यह रूप होना चाहिए:

अब हम अपना कोड चलाते हैं, और एक छवि अपलोड करते हैं।

हैप्पी स्पंदन