شرح كيفية التعامل مع رفع الصور داخل nodejs باستخدام multer

تعرف على مكتبة Multer: الحل الأمثل لتحميل الملفات في Node.js

كيفية التعامل مع رفع الصور داخل Node.js باستخدام Multer

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

ما هو Multer ؟

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

تعمل Multer كـ "Middleware" (واجهة وسيطة) تقوم باستقبال البيانات المرسلة عبر نموذج HTML، واستخراج الملفات منها، ثم حفظها في مكان محدد على الخادم أو في الذاكرة.

مميزات استخدام مكتبة Multer

سهولة الاستخدام:

• توفر Multer واجهة برمجة تطبيقات بسيطة وسهلة الاستخدام.
• يمكن استخدام Multer مع أي إطار عمل NodeJS.

قوية:

• تدعم Multer تحميل الملفات من مختلف أنواع النماذج.
• تدعم Multer التحقق من صحة الملفات لمنع تحميل الملفات الضارة.

قابلة للتخصيص:

• يمكن تخصيص Multer لتغيير اسم الملف وحفظ الملفات في مواقع مختلفة.
• يمكن استخدام Multer مع برامج التخزين السحابية مثل Amazon S3.

خطوات استخدام مكتبة Multer

avatar: {
        type: String,
        default: 'uploads/profile.png'
    }

app.use('/uploads', express.static(path.join(__dirname, 'uploads')));

بداخل route الذي سيتم رفع الصوره بداخله يمكنك استخدام مكتبة multer

في هذا الجزء سوف نحصل على صورة من جهاز المستخدم ووضعها بداخل المسار uploads وهو الملف الذي سيتم فيه رفع الصور ونحصل على عنوان الصورة وتسميتها باسم user-والتاريخ الحالي مع الامتداد الخاص بالصورة

بعدها نقوم بعمل فيلتر لمعرفه هل العنصر عباره عن صوره ام لا واذا كان صوره سوف نقوم برفعه واذا لم يكن صورة سوف نظهر رسالة للمستخدم

بعدها قمنا بعمل متغير باسم upload  وبه نرسل عنوان الصورة والمسار الخاص بها وعملية التصفيه للتاكد من نوع الملف .

واخيرا upload.single('avatar') لرفع صورة واحده وهيا ما تم تحديدها بداخل key باسم avater .

const diskStorage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, 'uploads');
    },
    filename: function(req, file, cb) {
        const ext = file.mimetype.split('/')[1];
        const fileName = `user-${Date.now()}.${ext}`;
        cb(null, fileName);
    }
})

const fileFilter = (req, file, cb) => {
    const imageType = file.mimetype.split('/')[0];
    
    if(imageType === 'image') {
        return cb(null, true)
    } else {
        return cb(appError.create('file must be an image', 400), false)
    }
}

const upload = multer({ 
    storage: diskStorage,
    fileFilter
})

router.route('/register')
            .post(upload.single('avatar'), usersController.register)

الان في مرحلة رفع البيانات على السيرفر سوف نقوم بارسال الصورة عن طريق ملئ الmodel بهذا الشكل

const newUser = new User({
        firstName,
        lastName,
        email,
        password: hashedPassword,
        role,
        avatar: req.file.filename
    })

هذا مثال بسيط لاستخدام مكتبة Multer.

يمكنك توسيع هذا المثال ليشمل المزيد من الميزات مثل التحقق من صحة الملفات وتغيير اسم الملف.

يمكنك استخدام Multer مع برامج التخزين السحابية مثل Amazon S3.

Multer هي مكتبة NodeJS قوية وسهلة الاستخدام لمعالجة تحميل الملفات.

تُسهل Multer عملية تحميل الملفات إلى خادم NodeJS وتوفر ميزات إضافية مثل التحقق من صحة الملفات وتغيير اسم الملف وحفظ الملفات في مواقع مختلفة.

منصة برمجة: NodeJS

تخصص البرمجة: تطوير تطبيقات الويب

البرمجة الحاسوبية: كتابة تطبيقات NodeJS

واجهات برمجة التطبيقات: APIs