मुल्टर का उपयोग करके Node.js में इमेज कैसे अपलोड करें

नोड.जेएस में फ़ाइल अपलोड को संभालने के तीन मुख्य तरीके हैं: छवियों को सीधे अपने सर्वर पर सहेजना, छवि को सहेजना आपके डेटाबेस में बाइनरी डेटा या बेस64 स्ट्रिंग डेटा, और आपके डेटा को सहेजने और प्रबंधित करने के लिए Amazon Web Service (AWS) S3 बकेट का उपयोग करना इमेजिस।

यहां आप सीखेंगे कि कुछ चरणों में Node.js एप्लिकेशन में छवियों को सीधे अपने सर्वर पर अपलोड करने और सहेजने के लिए, Node.js मिडलवेयर, Multer का उपयोग कैसे करें।

चरण 1: विकास पर्यावरण की स्थापना

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

सबसे पहले, एक प्रोजेक्ट फोल्डर बनाएं और निम्न कमांड चलाकर उसमें जाएं:

mkdir बहु-ट्यूटोरियल
सीडी multi-tutorial

इसके बाद, अपनी प्रोजेक्ट डायरेक्टरी में npm को चलाकर इनिशियलाइज़ करें:

एनपीएम init -y

अगला, आपको कुछ निर्भरताएँ स्थापित करने की आवश्यकता होगी। इस ट्यूटोरियल के लिए आवश्यक निर्भरताओं में शामिल हैं:

• अभिव्यक्त करना: एक्सप्रेस एक Node.js ढांचा है जो वेब और मोबाइल एप्लिकेशन के लिए सुविधाओं का एक मजबूत सेट प्रदान करता है। यह Node.js के साथ बैकएंड एप्लिकेशन बनाना आसान बनाता है।
instagram viewer
• मुल्टर: मल्टर एक एक्सप्रेस मिडलवेयर है जो आपके सर्वर पर छवियों को अपलोड करना और सहेजना आसान बनाता है।

के साथ संकुल स्थापित करें नोड पैकेज प्रबंधक चलाकर:

NPM स्थापित करना एक्सप्रेस मल्टर

अगला, एक बनाएँ app.js अपने प्रोजेक्ट की रूट डायरेक्टरी में फाइल करें और बेसिक एक्सप्रेस सर्वर बनाने के लिए नीचे दिए गए कोड ब्लॉक को जोड़ें:

//app.js
कॉन्स्ट एक्सप्रेस = ज़रूरत होना('अभिव्यक्त करना');
कॉन्स्ट ऐप = एक्सप्रेस ();
कॉन्स्ट बंदरगाह = प्रक्रिया.env। पोर्ट || 3000;
app.listen (पोर्ट, ()=>{
सांत्वना देना।लकड़ी का लट्ठा(`ऐप बंदरगाह पर सुन रहा है ${पोर्ट}`);
});

चरण 2: मल्टर को कॉन्फ़िगर करना

सबसे पहले, आयात करें multer आप में app.js फ़ाइल।

कॉन्स्ट मुलर = ज़रूरत होना("मल्टर");

multer एक भंडारण इंजन की आवश्यकता होती है जिसमें उस निर्देशिका के बारे में जानकारी होती है जहां अपलोड की गई फाइलें संग्रहीत की जाएंगी और फाइलों का नाम कैसे रखा जाएगा।

ए multer को कॉल करके स्टोरेज इंजन बनाया जाता है डिस्कस्टोरेज आयातित पर विधि multer मापांक। यह विधि एक लौटाती है भंडारण इंजन स्थानीय फाइल सिस्टम पर फाइलों को स्टोर करने के लिए कार्यान्वयन को कॉन्फ़िगर किया गया।

यह कॉन्फ़िगरेशन ऑब्जेक्ट को दो गुणों के साथ लेता है: गंतव्य, जो एक स्ट्रिंग या फ़ंक्शन है जो निर्दिष्ट करता है कि अपलोड की गई छवियों को कहाँ संग्रहीत किया जाएगा।

दूसरी संपत्ति, फ़ाइल का नाम, एक ऐसा फ़ंक्शन है जो अपलोड की गई फ़ाइलों के नाम निर्धारित करता है। इसमें तीन पैरामीटर लगते हैं: अनुरोध, फ़ाइल, और एक कॉलबैक (सीबी). अनुरोध एक्सप्रेस है अनुरोध वस्तु, फ़ाइल एक वस्तु है जिसमें संसाधित फ़ाइल के बारे में जानकारी है, और सीबी एक कॉलबैक है जो अपलोड की गई फ़ाइलों के नाम निर्धारित करता है। कॉलबैक फ़ंक्शन त्रुटि और फ़ाइल नाम को तर्क के रूप में लेता है।

नीचे दिए गए कोड ब्लॉक को अपने में जोड़ें app.js फ़ाइल एक भंडारण इंजन बनाने के लिए:

// स्टोरेज इंजन सेट करना
कॉन्स्ट स्टोरेजइंजिन = मल्टर.डिस्कस्टोरेज ({
 गंतव्य: "।/इमेजिस",
 फ़ाइल नाम: (अनुरोध, फ़ाइल, सीबी) => {
 सीबी (व्यर्थ, `${तारीख।अब()}--${file.originalname}`);
 },
});

उपरोक्त कोड ब्लॉक में, आप सेट करते हैं गंतव्य संपत्ति "।/इमेजिस”, इस प्रकार, छवियों को आपके प्रोजेक्ट की निर्देशिका में एक में संग्रहीत किया जाएगा इमेजिस फ़ोल्डर। फिर, कॉलबैक में, आप पास हो गए व्यर्थ फ़ाइल नाम के रूप में त्रुटि और टेम्पलेट स्ट्रिंग के रूप में। टेम्प्लेट स्ट्रिंग में कॉल करके उत्पन्न टाइमस्टैम्प होता है दिनांक.अभी () यह सुनिश्चित करने के लिए कि छवि नाम हमेशा अद्वितीय हैं, फ़ाइल नाम और टाइमस्टैम्प को अलग करने के लिए दो हाइफ़न और फ़ाइल का मूल नाम, जिसे से एक्सेस किया जा सकता है फ़ाइल वस्तु।

इस टेम्प्लेट से परिणामी स्ट्रिंग्स इस तरह दिखेंगी: 1663080276614--example.jpg.

अगला, आपको आरंभ करने की आवश्यकता है multer भंडारण इंजन के साथ।

नीचे दिए गए कोड ब्लॉक को अपने में जोड़ें app.js स्टोरेज इंजन के साथ मल्टर को इनिशियलाइज़ करने के लिए फ़ाइल:

// मल्टर को इनिशियलाइज़ करना
कॉन्स्ट अपलोड = मल्टर ({
 भंडारण: भंडारण इंजन,
});

multer एक मल्टीर इंस्टेंस लौटाता है जो अपलोड की गई फ़ाइलों को प्रोसेस करने वाले मिडलवेयर को जनरेट करने के लिए कई तरीके प्रदान करता है मल्टीपार्ट / फॉर्म-डेटा प्रारूप।

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

वर्तमान में, आपका मल्टीर कॉन्फ़िगरेशन पूरा हो गया है, लेकिन कोई सत्यापन नियम नहीं हैं जो यह सुनिश्चित करता है कि आपके सर्वर पर केवल छवियों को सहेजा जा सकता है।

चरण 3: छवि सत्यापन नियम जोड़ना

आपके द्वारा जोड़ा जा सकने वाला पहला सत्यापन नियम आपके एप्लिकेशन पर अपलोड की जाने वाली छवि के लिए अनुमत अधिकतम आकार है।

नीचे दिए गए कोड ब्लॉक के साथ अपने मल्टर कॉन्फ़िगरेशन ऑब्जेक्ट को अपडेट करें:

कॉन्स्ट अपलोड = मल्टर ({
 भंडारण: भंडारण इंजन,
सीमा: { फ़ाइल का साइज़: 1000000 },
});

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

एक और सत्यापन नियम जिसे आप जोड़ सकते हैं वह है fileFilter संपत्ति, कौन सी फाइलें अपलोड की जाती हैं, इसे नियंत्रित करने के लिए एक वैकल्पिक कार्य। यह फ़ंक्शन संसाधित होने वाली प्रत्येक फ़ाइल के लिए कहा जाता है। यह फ़ंक्शन समान पैरामीटर लेता है फ़ाइल का नाम समारोह: अनुरोध, फ़ाइल, और सीबी.

अपने कोड को साफ और अधिक पुन: प्रयोज्य बनाने के लिए, आप सभी फ़िल्टरिंग तर्क को एक फ़ंक्शन में सार कर देंगे।

नीचे दिए गए कोड ब्लॉक को अपने में जोड़ें app.js फ़ाइल फ़िल्टरिंग तर्क को लागू करने के लिए फ़ाइल:

कॉन्स्ट पथ = ज़रूरत होना("पथ");
कॉन्स्ट चेकफाइल टाइप = समारोह (फ़ाइल, सीबी) {
// अनुमत फ़ाइल एक्सटेंशन
कॉन्स्ट फ़ाइल प्रकार = /jpeg|jpg|png|gif|svg/;
 //जाँच करना विस्तार नाम
कॉन्स्ट extName = fileTypes.test (path.extname (file.originalname).toLowerCase ());
कॉन्स्ट mimeType = fileTypes.test (file.mimetype);
 अगर (माइम टाइप && एक्सटनाम) {
वापस करना सीबी (व्यर्थ, सत्य);
 } अन्य {
 सीबी ("त्रुटि: आप केवल चित्र अपलोड कर सकते हैं!!");
 }
};

checkFileType फ़ंक्शन दो पैरामीटर लेता है: फ़ाइल और सीबी.

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

परीक्षा पारित स्ट्रिंग और रिटर्न में एक मैच के लिए विधि की जाँच करता है सत्य या असत्य इस पर निर्भर करता है कि यह एक मैच पाता है या नहीं। उसके बाद, आप अपलोड की गई फ़ाइल का नाम पास करते हैं, जिसे आप एक्सेस कर सकते हैं file.originalnameपथ के मॉड्यूल में exname विधि, जो इसे स्ट्रिंग पथ का विस्तार लौटाती है। अंत में, आप जावास्क्रिप्ट को चेन करते हैं toLowerCase अपरकेस में उनके एक्सटेंशन नामों के साथ छवियों को संभालने के लिए अभिव्यक्ति के लिए स्ट्रिंग फ़ंक्शन।

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

यदि दो स्थितियाँ सही होती हैं, तो आप कॉलबैक को वापस कर देते हैं व्यर्थ और सच है, या आप एक त्रुटि के साथ कॉलबैक लौटाते हैं।

अंत में, आप जोड़ें fileFilter आपके मल्टर कॉन्फ़िगरेशन के लिए संपत्ति।

कॉन्स्ट अपलोड = मल्टर ({
 भंडारण: भंडारण इंजन,
सीमा: { फ़ाइल का साइज़: 10000000 },
 फाइलफिल्टर: (अनुरोध, फ़ाइल, सीबी) => {
 checkFileType (फ़ाइल, cb);
 },
});

चरण 4: एक एक्सप्रेस मिडलवेयर के रूप में मल्टर का उपयोग करना

अगला, आपको रूट हैंडलर लागू करना होगा जो छवि अपलोड को संभालेंगे।

कॉन्फ़िगरेशन के आधार पर मल्टर एकल और एकाधिक छवि अपलोड दोनों को संभाल सकता है।

नीचे दिए गए कोड ब्लॉक को अपने में जोड़ें app.js एकल छवि अपलोड के लिए रूट हैंडलर बनाने के लिए फ़ाइल:

ऐप पोस्ट ("/single", अपलोड.सिंगल ("छवि"), (अनुरोध, Res) => {
अगर (अनुरोध।फ़ाइल) {
 पुनः भेजें ("एकल फ़ाइल सफलतापूर्वक अपलोड की गई");
 } अन्य {
 res.status (400).भेजें("कृपया एक वैध छवि अपलोड करें");
 }
});

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

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

नीचे दिए गए कोड ब्लॉक को अपने में जोड़ें app.js एकाधिक छवि अपलोड के लिए रूट हैंडलर बनाने के लिए फ़ाइल:

ऐप पोस्ट ("/multiple", अपलोड। सरणी ("इमेजिस", 5), (अनुरोध, Res) => {
अगर (अनुरोधफ़ाइलें) {
 पुनः भेजें ("एकाधिक फ़ाइलें सफलतापूर्वक अपलोड की गईं");
 } अन्य {
 res.status (400).भेजें("कृपया एक मान्य चित्र अपलोड करें");
 }
});

उपरोक्त कोड ब्लॉक में, आपने कॉल किया था सरणी विधि पर डालना वेरिएबल, जो आपके मल्टर कॉन्फ़िगरेशन को स्टोर करता है। यह विधि दो तर्क लेती है - एक फ़ील्ड नाम और एक अधिकतम संख्या - और मिडलवेयर लौटाती है जो एक ही फ़ील्ड नाम साझा करने वाली कई फ़ाइलों को संसाधित करता है। फिर, आप पास हो गए इमेजिस साझा प्रपत्र फ़ील्ड के रूप में और 5 छवियों की अधिकतम संख्या के रूप में जिन्हें एक बार में अपलोड किया जा सकता है।

मल्टर का उपयोग करने के फायदे

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