هناك ثلاث طرق رئيسية للتعامل مع تحميلات الملفات في Node.js: حفظ الصور مباشرة على الخادم الخاص بك ، وحفظ الصور البيانات الثنائية أو بيانات سلسلة base64 إلى قاعدة البيانات الخاصة بك ، واستخدام حاويات Amazon Web Service (AWS) S3 لحفظ وإدارة الصور.

هنا سوف تتعلم كيفية استخدام Multer ، وهو برنامج وسيط Node.js ، لتحميل وحفظ الصور مباشرة إلى الخادم الخاص بك في تطبيقات Node.js في بضع خطوات.

الخطوة الأولى: تهيئة بيئة التطوير

الكود المستخدم في هذا المشروع متاح في ملف مستودع جيثب وهو مجاني لك لاستخدامه بموجب ترخيص MIT.

أولاً ، قم بإنشاء مجلد مشروع وانتقل إليه عن طريق تشغيل الأمر التالي:

mkdir multer- تعليمي
قرص مضغوط مولتر تعليمي

بعد ذلك ، قم بتهيئة npm في دليل المشروع عن طريق تشغيل:

npm الحرف الأول

بعد ذلك ، ستحتاج إلى تثبيت بعض التبعيات. تشمل التبعيات المطلوبة لهذا البرنامج التعليمي ما يلي:

  • يعبر: Express هو إطار عمل Node.js يوفر مجموعة قوية من الميزات لتطبيقات الويب والجوال. يسهل إنشاء تطبيقات الواجهة الخلفية باستخدام Node.js.
  • مولتر: Multer هو برنامج وسيط سريع يبسط تحميل الصور وحفظها على الخادم الخاص بك.
instagram viewer

قم بتثبيت الحزم بامتداد مدير حزمة العقدة عن طريق الركض:

npm ثَبَّتَ صريح مولتر

بعد ذلك ، قم بإنشاء ملف app.js ملف في الدليل الجذر لمشروعك وأضف كتلة التعليمات البرمجية أدناه لإنشاء خادم Express أساسي:

//app.js
مقدار ثابت صريح = يتطلب('يعبر')؛
مقدار ثابت التطبيق = صريح () ؛
مقدار ثابت المنفذ = process.env. بورت || 3000;
app.listen (المنفذ ، () =>{
وحدة التحكم.سجل("التطبيق يستمع على المنفذ $ {منفذ}`);
});

الخطوة 2: تكوين Multer

أولا ، الاستيراد مولتر في الخاص بك app.js ملف.

مقدار ثابت مولتر = يتطلب("مولتر") ؛

مولتر يتطلب محرك تخزين يحتوي على معلومات حول الدليل حيث سيتم تخزين الملفات التي تم تحميلها وكيفية تسمية الملفات.

أ مولتر يتم إنشاء محرك التخزين عن طريق استدعاء تخزين المكتب الطريقة على الملف المستورد مولتر وحدة. تقوم هذه الطريقة بإرجاع ملف محرك التخزين تم تكوين التنفيذ لتخزين الملفات على نظام الملفات المحلي.

يأخذ كائن تكوين بخاصيتين: وجهة، وهي عبارة عن سلسلة أو وظيفة تحدد مكان تخزين الصور التي تم تحميلها.

الخاصية الثانية ، اسم الملف، هي وظيفة تحدد أسماء الملفات المرفوعة. يتطلب ثلاث معلمات: مطلوب, ملف، ومعاودة الاتصال (cb). مطلوب هو اكسبرس طلب هدف، ملف هو كائن يحتوي على معلومات حول الملف المعالج ، و cb هو رد اتصال يحدد أسماء الملفات المرفوعة. تأخذ وظيفة رد الاتصال الخطأ واسم الملف كوسائط.

أضف كتلة التعليمات البرمجية أدناه إلى الخاص بك app.js ملف لإنشاء محرك تخزين:

// إعداد محرك التخزين
مقدار ثابت storageEngine = multer.diskStorage ({
 وجهة: "./ الصور",
 اسم الملف: (req، file، cb) => {
 cb (باطل, `${تاريخ.الآن()}--$ {file.originalname}`);
 },
});

في كتلة التعليمات البرمجية أعلاه ، قمت بتعيين ملف وجهة خاصية "./ الصور"، وبالتالي ، سيتم تخزين الصور في دليل مشروعك بتنسيق الصور مجلد. ثم ، في رد الاتصال ، مررت باطل كخطأ وسلسلة قالب كاسم الملف. تتكون سلسلة القالب من طابع زمني تم إنشاؤه بواسطة الاستدعاء Date.now () للتأكد من أن أسماء الصور فريدة دائمًا ، شرطان لفصل اسم الملف والطابع الزمني ، والاسم الأصلي للملف ، والذي يمكن الوصول إليه من ملف هدف.

ستبدو السلاسل الناتجة من هذا القالب على النحو التالي: 1663080276614 - example.jpg.

بعد ذلك ، تحتاج إلى التهيئة مولتر مع محرك التخزين.

أضف كتلة التعليمات البرمجية أدناه إلى الخاص بك app.js ملف لتهيئة multer مع محرك التخزين:

// تهيئة multer
مقدار ثابت تحميل = multer ({
 التخزين: تخزين المحرك ،
});

مولتر يسترجع مثيل Multer الذي يوفر عدة طرق لإنشاء برمجية وسيطة تعالج الملفات التي تم تحميلها متعدد الأجزاء / نموذج البيانات شكل.

في مقطع التعليمات البرمجية أعلاه ، تقوم بتمرير كائن تكوين بامتداد تخزين تعيين الخاصية على التخزين، وهو محرك التخزين الذي قمت بإنشائه مسبقًا.

حاليًا ، اكتمل تكوين Multer الخاص بك ، ولكن لا توجد قواعد تحقق من الصحة تضمن إمكانية حفظ الصور فقط على الخادم الخاص بك.

الخطوة 3: إضافة قواعد التحقق من الصورة

قاعدة التحقق الأولى التي يمكنك إضافتها هي الحد الأقصى للحجم المسموح به لتحميل صورة إلى تطبيقك.

قم بتحديث كائن تكوين multer الخاص بك باستخدام كتلة التعليمات البرمجية أدناه:

مقدار ثابت تحميل = multer ({
 التخزين: تخزين المحرك ،
حدود: { حجم الملف: 1000000 },
});

في كتلة التعليمات البرمجية أعلاه ، أضفت ملف حدود خاصية كائن التكوين. هذه الخاصية هي كائن يحدد حدودًا مختلفة للبيانات الواردة. قمت بتعيين ملف حجم الملف الخاصية ، التي يتم من خلالها تعيين الحد الأقصى لحجم الملف بالبايت 1000000، أي ما يعادل 1 ميغا بايت.

قاعدة التحقق الأخرى التي يمكنك إضافتها هي فيلتر property ، وهي وظيفة اختيارية للتحكم في الملفات التي يتم تحميلها. يتم استدعاء هذه الوظيفة لكل ملف تتم معالجته. تأخذ هذه الوظيفة نفس المعلمات مثل اسم الملف وظيفة: مطلوب, ملف، و cb.

لجعل الكود أكثر وضوحًا وقابلية لإعادة الاستخدام ، ستقوم بتجريد كل منطق التصفية في وظيفة.

أضف كتلة التعليمات البرمجية أدناه إلى الخاص بك app.js ملف لتنفيذ منطق تصفية الملف:

مقدار ثابت المسار = يتطلب("طريق")؛
مقدار ثابت checkFileType = وظيفة (ملف ، cb) {
// امتدادات الملفات المسموح بها
مقدار ثابت أنواع الملفات = /jpeg|jpg|png|gif|svg/;
 //يفحص امتداد الأسماء
مقدار ثابت extName = fileTypes.test (path.extname (file.originalname) .toLowerCase ()) ؛
مقدار ثابت mimeType = fileTypes.test (file.mimetype) ،
 إذا (mimeType && extName) {
يعود cb (باطل, حقيقي);
 } آخر {
 cb ("خطأ: يمكنك فقط تحميل الصور !!");
 }
};

ال تحقق من نوع الملف تأخذ الوظيفة معلمتين: ملف و cb.

في كتلة التعليمات البرمجية أعلاه ، قمت بتعريف ملف أنواع الملفات متغير يخزن تعبير regex بامتدادات ملفات الصور المسموح بها. بعد ذلك ، قمت باستدعاء امتحان طريقة على تعبير regex.

ال امتحان يتحقق الأسلوب من وجود تطابق في السلسلة التي تم تمريرها ويعود حقيقي أو خطأ شنيع اعتمادًا على ما إذا كان سيجد تطابقًا أم لا. بعد ذلك ، تقوم بتمرير اسم الملف الذي تم تحميله ، والذي يمكنك الوصول إليه من خلاله file.originalname، في وحدة المسار extname ، الذي يعيد امتداد مسار السلسلة إليه. أخيرًا ، تقوم بربط JavaScript toLowerCase سلسلة إلى التعبير للتعامل مع الصور بأسماء امتدادها بأحرف كبيرة.

لا يكفي التحقق من اسم الامتداد وحده ، حيث يمكن تحرير أسماء الامتدادات بسهولة. لضمان تحميل الصور فقط ، يجب عليك التحقق من ملف نوع التمثيل الصامت أيضاً. يمكنك الوصول إلى ملفات نوع التمثيل الصامت الملكية من خلال file.mimetype. لذلك ، عليك التحقق من نوع التمثيل الصامت الملكية باستخدام امتحان طريقة كما فعلت مع أسماء الامتدادات.

إذا عاد الشرطان صحيحًا ، فستعيد رد الاتصال باستخدام باطل وصحيح ، أو تقوم بإرجاع رد الاتصال مع وجود خطأ.

أخيرًا ، أضف امتداد فيلتر الخاصية لتكوين multer الخاص بك.

مقدار ثابت تحميل = multer ({
 التخزين: تخزين المحرك ،
حدود: { حجم الملف: 10000000 },
 fileFilter: (req، file، cb) => {
 checkFileType (ملف ، cb) ؛
 },
});

الخطوة 4: استخدام Multer كبرنامج وسيط سريع

بعد ذلك ، يجب عليك تنفيذ معالجات المسار التي ستتعامل مع تحميلات الصور.

يمكن لـ Multer التعامل مع كل من عمليات تحميل الصور الفردية والمتعددة بناءً على التكوين.

أضف كتلة التعليمات البرمجية أدناه إلى الخاص بك app.js ملف لإنشاء معالج توجيه لعمليات تحميل صورة واحدة:

app.post ("/single"، upload.single ("صورة") ، (مطلوب ، الدقة) => {
لو (مطلوب.ملف) {
 res.send ("تم تحميل ملف واحد بنجاح");
 } آخر {
 res.status (400). إرسال ("الرجاء تحميل صورة صالحة");
 }
});

في كتلة التعليمات البرمجية أعلاه ، قمت باستدعاء ملف أعزب طريقة على رفع متغير ، والذي يخزن تكوين الموليتر الخاص بك. تقوم هذه الطريقة بإرجاع برمجية وسيطة تعالج "ملفًا واحدًا" مرتبطًا بحقل النموذج المحدد. ثم قمت بتمرير صورة كحقل النموذج.

أخيرًا ، تحقق مما إذا كان قد تم تحميل الملف من خلال ملف مطلوب كائن في ملف ملكية. إذا كان الأمر كذلك ، فأنت ترسل رسالة نجاح ، أو ترسل رسالة خطأ.

أضف كتلة التعليمات البرمجية أدناه إلى الخاص بك app.js ملف لإنشاء معالج توجيه لعمليات تحميل متعددة للصور:

app.post ("/multiple"، upload.array ("الصور"، 5) ، (مطلوب ، الدقة) => {
لو (مطلوب.files) {
 res.send ("تم تحميل ملفات متعددة بنجاح");
 } آخر {
 res.status (400). إرسال ("الرجاء تحميل صور صالحة");
 }
});

في كتلة التعليمات البرمجية أعلاه ، قمت باستدعاء ملف مجموعة مصفوفة طريقة على رفع متغير ، والذي يخزن تكوين الموليتر الخاص بك. تأخذ هذه الطريقة وسيطتين - اسم الحقل وعدد أقصى - وتقوم بإرجاع البرامج الوسيطة التي تعالج ملفات متعددة تشترك في نفس اسم الحقل. ثم مررت الصور كحقل النموذج المشترك و 5 أقصى عدد من الصور التي يمكن تحميلها مرة واحدة.

مزايا استخدام مولتر

يؤدي استخدام Multer في تطبيقات Node.js إلى تبسيط العملية المعقدة لتحميل الصور وحفظها مباشرة على الخادم الخاص بك. يعتمد Multer أيضًا على busboy ، وهو وحدة Node.js لتحليل بيانات النموذج الواردة ، مما يجعلها فعالة للغاية في تحليل بيانات النموذج.