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

डेटाबेस में छवियों को संग्रहीत करने की आमतौर पर अनुशंसा नहीं की जाती है। आवश्यक भंडारण और प्रसंस्करण शक्ति की मात्रा के कारण ऐसा करना शीघ्र ही महंगा हो सकता है। सुपाबेस स्टोरेज जैसी लागत प्रभावी और स्केलेबल स्टोरेज सेवा का उपयोग करना बेहतर है।

नीचे आप सीखेंगे कि सुपाबेस जावास्क्रिप्ट क्लाइंट लाइब्रेरी का उपयोग करके स्टोरेज बकेट में छवियों को कैसे अपलोड किया जाए और नेक्स्ट.जेएस एप्लिकेशन में छवियों की सेवा कैसे करें।

एक सुपरबेस प्रोजेक्ट बनाना

यदि आपके पास पहले से कोई Next.js एप्लिकेशन तैयार नहीं है, तो अधिकारी का अनुसरण करें Next.js आरंभ करने की मार्गदर्शिका अपना आवेदन बनाने के लिए।

एक बार ऐसा करने के बाद, एक सुपरबेस डेटाबेस बनाने के लिए इन चरणों का पालन करें:

  1. सुपरबेस वेबसाइट पर नेविगेट करें और एक नया खाता बनाएं। यदि आपके पास पहले से खाता है, तो लॉग इन करें।
  2. Supabase डैशबोर्ड से, क्लिक करें एक नया प्रोजेक्ट बनाएं बटन।
  3. अपने प्रोजेक्ट को एक नाम दें और क्लिक करें
    instagram viewer
    प्रोजेक्ट बनाएं बटन। एक बार जब सुपरबेस प्रोजेक्ट बना लेता है, तो यह आपको प्रोजेक्ट डैशबोर्ड पर रीडायरेक्ट कर देगा

प्रोजेक्ट बनाने के बाद स्टोरेज बकेट बनाएं।

एक सुपरबेस स्टोरेज बकेट बनाना

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

डैशबोर्ड का उपयोग करने के लिए, इन चरणों का पालन करें:

  1. पर जाएँ सुपरबेस स्टोरेज डैशबोर्ड में पेज।
  2. क्लिक नई बाल्टी और बकेट के लिए एक नाम दर्ज करें। आप इसे छवियों का नाम दे सकते हैं क्योंकि आप इसमें छवियों को संगृहीत कर रहे होंगे।
  3. क्लिक बाल्टी बनाएँ.

इसके बाद, आप बाल्टी के साथ इंटरैक्ट करने के लिए अपने ऐप में एक सुपरबेस क्लाइंट स्थापित करेंगे।

सुपरबेस क्लाइंट की स्थापना

टर्मिनल के माध्यम से सुपरबेस-जेएस क्लाइंट लाइब्रेरी स्थापित करके प्रारंभ करें:

एनपीएम @ सुपरबेस / सुपरबेस-जेएस स्थापित करें

यदि आप इसका उपयोग कर रहे हैं तो अपने एप्लिकेशन के रूट पर या src फ़ोल्डर में lib नामक एक नया फ़ोल्डर बनाएं। इस फ़ोल्डर में, नाम की एक नई फ़ाइल जोड़ें supabase.js और Supabase क्लाइंट को इनिशियलाइज़ करने के लिए निम्न कोड का उपयोग करें।

आयात {क्रिएट क्लाइंट} से'@सुपाबेस/सुपबेस-जेएस'
निर्यातकॉन्स्ट सुपरबेस = क्रिएट क्लाइंट ('', '')

प्रोजेक्ट URL और anon कुंजी को अपने विवरण से बदलें, जिसे आप इसमें पा सकते हैं सुपरबेस परियोजना सेटिंग्स. आप .env फ़ाइल में विवरण कॉपी कर सकते हैं और उन्हें वहां से संदर्भित कर सकते हैं।

SUPABASE_PROJECT_URL="your_project_url"
SUPABASE_PROJECT_ANON_KEY="your_project_anon_key"

अब, supabase.js में, आपके पास होना चाहिए:

निर्यातकॉन्स्ट सुपरबेस = क्रिएट क्लाइंट (
 प्रक्रिया.env। SUPABASE_PROJECT_URL,
 प्रक्रिया.env। SUPABASE_ANON_KEY
);

एक बार जब आप ऐसा कर लेते हैं, तो एक ऐसा फॉर्म बनाएं जो छवियों को स्वीकार करे।

छवियों को स्वीकार करने वाला प्रपत्र बनाना

अंदर Next.js ऐप फोल्डर अपने आवेदन में, नाम का एक सबफ़ोल्डर बनाएँ डालना और नाम की एक नई फ़ाइल जोड़ें पेज.जेएस. यह /upload रूट पर उपलब्ध एक नया पेज बनाएगा। यदि आप Next.js 12 का उपयोग कर रहे हैं, तो इसमें upload.js बनाएं पृष्ठों फ़ोल्डर।

अपलोड पेज में, फॉर्म बनाने के लिए निम्न कोड जोड़ें।

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


कॉन्स्ट हैंडल सबमिट करें = async (ई) => {
 e.preventDefault ();
// तस्विर अपलोड करना
 };


कॉन्स्ट हैंडलफाइल चयनित = (इ) => {
 सेटफ़ाइल (e.target.files [0]);
 };
वापस करना (


"फ़ाइल" नाम ="छवि" onChange={handleFileSelected} />

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

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

एक सुपरबेस स्टोरेज बकेट में एक छवि फ़ाइल अपलोड करना

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

कॉन्स्ट हैंडल सबमिट करें = async (ई) => {
 e.preventDefault ();
कॉन्स्ट फ़ाइल नाम = `${uuidv4()}-${file.name}`;
कॉन्स्ट {डेटा, त्रुटि} = इंतजार supabase.storage
 ।से("इमेजिस")
 .अपलोड (फ़ाइल नाम, फ़ाइल, {
 कैश नियंत्रण: "3600",
 अप्सर्ट: असत्य,
 });
कॉन्स्ट फ़ाइलपथ = डेटा.पथ;
// फ़ाइलपथ को डेटाबेस में सेव करें
 };

इस फ़ंक्शन में, आप फ़ाइल नाम और uuid npm पैकेज द्वारा उत्पन्न UUID को जोड़कर एक अद्वितीय फ़ाइल नाम बना रहे हैं। समान नाम साझा करने वाली फ़ाइलों को ओवरराइट करने से बचने के लिए इसकी अनुशंसा की जाती है।

आपको एनपीएम के माध्यम से यूयूआईडी पैकेज स्थापित करने की आवश्यकता होगी, इसलिए कॉपी करें और टर्मिनल में नीचे कमांड चलाएं।

एनपीएम यूआईडी स्थापित करें

फिर, अपलोड पृष्ठ के शीर्ष पर, uuid का संस्करण 4 आयात करें।

आयात {वि4 जैसा uuidv4} से"यूयूआईडी";

यदि आप यूयूआईडी पैकेज का उपयोग नहीं करना चाहते हैं, तो कुछ अन्य हैं अद्वितीय आईडी उत्पन्न करने के लिए आप जिन विधियों का उपयोग कर सकते हैं.

इसके बाद, "छवियों" नामक स्टोरेज बकेट में फ़ाइल अपलोड करने के लिए सुपरबेस क्लाइंट का उपयोग करें। अपनी फ़ाइल के शीर्ष पर स्थित सुपरबेस क्लाइंट को आयात करना याद रखें।

आयात {सुपरबेस} से"@/लिब/सुपाबेस";

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

सुपाबेस डेटा और एरर ऑब्जेक्ट वाली वस्तु लौटाएगा। डेटा ऑब्जेक्ट में आपके द्वारा अभी अपलोड की गई छवि का URL है।

काम करने के लिए इस अपलोड फ़ंक्शन के लिए, आपको एक एक्सेस पॉलिसी बनानी होगी जो आपके एप्लिकेशन को इन चरणों का पालन करके एक सुपरबेस स्टोरेज बकेट में डेटा डालने और पढ़ने की अनुमति देती है:

  1. अपने प्रोजेक्ट डैशबोर्ड पर, पर क्लिक करें भंडारण बाईं ओर के साइडबार पर टैब।
  2. अपनी स्टोरेज बकेट चुनें और पर क्लिक करें पहुँच टैब।
  3. अंतर्गत बाल्टी नीतियां, क्लिक करें नई नीति बटन।
  4. का चयन करें पूर्ण अनुकूलन के लिए खरोंच से नीति बनाने का विकल्प।
  5. में नीति जोड़ें संवाद, अपनी नीति के लिए एक नाम दर्ज करें (उदा. "अनुमति दें सम्मिलित करें और पढ़ें").
  6. चुनना डालना और चुनना से अनुमतियाँ अनुमत संचालन ड्रॉप डाउन मेनू।
  7. क्लिक करें समीक्षा नीतियों की समीक्षा करने के लिए बटन।
  8. क्लिक करें बचाना नीति जोड़ने के लिए बटन।

अब आप एक्सेस एरर बढ़ाए बिना इमेज अपलोड कर पाएंगे।

आपके आवेदन में अपलोड की गई छवियों की सेवा करना

अपनी साइट पर छवि प्रस्तुत करने के लिए, आपको एक सार्वजनिक URL की आवश्यकता होती है, जिसे आप दो अलग-अलग तरीकों से पुनः प्राप्त कर सकते हैं।

आप इस तरह से सुपरबेस क्लाइंट का उपयोग कर सकते हैं:

कॉन्स्ट फ़ाइलपथ = "Path_to_file_in_buckey"
कॉन्स्ट {डेटा} = सुपरबेस
 ।भंडारण
 ।से('इमेजिस')
 .getPublicUrl(`${फ़ाइलपथ}`)

या आप फ़ाइल पथ के साथ बकेट URL को मैन्युअल रूप से जोड़ सकते हैं:

कॉन्स्ट फ़ाइलपथ = `${bucket_url}/${फ़ाइलपथ}`

आपको जो भी तरीका पसंद हो उसका इस्तेमाल करें। एक बार आपके पास फ़ाइल पथ हो जाने के बाद, आप इसे Next.js छवि घटक में इस तरह उपयोग कर सकते हैं:

"" चौड़ाई = {200} ऊँचाई = {200}/>

यह कोड आपकी साइट पर छवि प्रदर्शित करेगा।

सुपरबेस के साथ मजबूत एप्लिकेशन बनाना

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

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