التعامل مع الصور في react و node js

للإجابة على الأمر بشكل أفضل، هل المشروع للتدريب أم مشروع حقيقي، وما هو حجم البيانات وحجم الصور المتوقع وهل سيتم عرض عدد كبير دفعة واحدة؟ وهل هناك إمكانية لاستخدام التخزين السحابي للصور مثل Amazon S3؟

أرى أن الطريقة المثالية هي أن يتم تحميل الصور وتخزينها في نظام تخزين خارجي ك Amazon S3 أو Cloudinary والحصول على رابط URL للصور المحملة ثم يتم بعد ذلك حفظ الروابط في قاعدة بيانات MongoDB بدلا من تخزين الصور نفسها.

يمكنك رفع الصورة في الجزء الخاص بالـ backend من خلال استخدام مكتبة مثل Multer لتحميل الملفات (للتعامل مع ملفات الصورة عند رفعها من قبل المدير) وتخزين الصورة في خدمة تخزين خارجية من خلال واجهة API الخاصة ب Amazon S3 مثلا لتحميل الصورة وتخزينها وبعد رفع الصورة بنجاح، ستحصلين على رابط URL للصورة ثم تحفظين رابط ال URL في قاعدة البيانات ك String مثلما قلت بالضبط.

وفي الجزء الخاص بـ frontend، يمكنك عرض الصور باستخدام عنصر <img src={imageURL} />، بحيث يمثل imageURL الرابط المخزن.

وهذا الاستعمال لأنه في حال ما إذا كنت ستعرضين عددا كبيرا من الصور دفعة واحدة، فمن الأفضل استخدام الخدمات الخارجية مثلما أشرنا مع استخدام CDN وهذا بغية تسريع تحميل الصور على واجهة المستخدم وأيضا يمكنك البحث عن طرق التسريع الأخرى مثلا يمكنك أيضا إضافة آليات مثل التحميل عند التمرير (lazy loading) في الواجهة الأمامية لتقليل الحمل على الخادم.

بتاريخ 21 دقائق مضت قال Mustafa Suleiman:

للإجابة على الأمر بشكل أفضل، هل المشروع للتدريب أم مشروع حقيقي، وما هو حجم البيانات وحجم الصور المتوقع وهل سيتم عرض عدد كبير دفعة واحدة؟ وهل هناك إمكانية لاستخدام التخزين السحابي للصور مثل Amazon S3؟

مشروع حقيقي للتخرج وفي الحقيقه لا اعرف ماهو حجم الصور ، ستكون صور من مواقع التواصل الاجتماعي لعرض ديكورات صالة معينه ليقوم الزبون برؤية هذه الصور على تطبيقنا ومن تم القيام بالحجز، وبالنسبه لصور الديكورات فان لكل ديكور وضعنا خمس صور upload.array('pictures', 5) 
ولا اعرف ماهو التخزين السحابي انا هذا هو سؤالي هل يجب ان استخدم طرق تخزين اخرى للتعامل مع الصور بشكل صحيح؟

بتاريخ 18 دقائق مضت قال ياسر مسكين:

أرى أن الطريقة المثالية هي أن يتم تحميل الصور وتخزينها في نظام تخزين خارجي ك Amazon S3 أو Cloudinary والحصول على رابط URL للصور المحملة ثم يتم بعد ذلك حفظ الروابط في قاعدة بيانات MongoDB بدلا من تخزين الصور نفسها.

يمكنك رفع الصورة في الجزء الخاص بالـ backend من خلال استخدام مكتبة مثل Multer لتحميل الملفات (للتعامل مع ملفات الصورة عند رفعها من قبل المدير) وتخزين الصورة في خدمة تخزين خارجية من خلال واجهة API الخاصة ب Amazon S3 مثلا لتحميل الصورة وتخزينها وبعد رفع الصورة بنجاح، ستحصلين على رابط URL للصورة ثم تحفظين رابط ال URL في قاعدة البيانات ك String مثلما قلت بالضبط.

وفي الجزء الخاص بـ frontend، يمكنك عرض الصور باستخدام عنصر <img src={imageURL} />، بحيث يمثل imageURL الرابط المخزن.

وهذا الاستعمال لأنه في حال ما إذا كنت ستعرضين عددا كبيرا من الصور دفعة واحدة، فمن الأفضل استخدام الخدمات الخارجية مثلما أشرنا مع استخدام CDN وهذا بغية تسريع تحميل الصور على واجهة المستخدم وأيضا يمكنك البحث عن طرق التسريع الأخرى مثلا يمكنك أيضا إضافة آليات مثل التحميل عند التمرير (lazy loading) في الواجهة الأمامية لتقليل الحمل على الخادم.

يعني في حال قمت برفع الصور في backend باستخدام multer بهذه الطريقة:
 

const express = require('express');

const router = express.Router();

const decorationController = require('../controllers/decoration');

const { authMiddleware, authorizeRoles } = require('../middleware/auth');

const multer = require('multer');

const path = require('path');

// إعداد التخزين في Multer

const storage = multer.diskStorage({

    destination: function (req, file, cb) {

        cb(null, 'uploads/'); // مجلد حفظ الصور

    },

    filename: function (req, file, cb) {

        cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname));

    }

});

// إعداد Multer مع التخزين المحدد

const upload = multer({ storage: storage });

// تطبيق Middleware للتحقق من JWT

router.use(authMiddleware);

// Routes

router.post('/', authorizeRoles('admin'), upload.array('pictures', 5), decorationController.createDecoration);
ومن تم القيام بحفظها في قاعدة البيانات بهذه الطريقة:
 

const Decoration = require('../models/decoration');

// إنشاء ديكور جديد

exports.createDecoration = async (req, res) => {

    try {

         // التحقق من أن المستخدم هو admin

        if (req.user.role !== 'admin') {

            return res.status(403).json({ message: 'Access denied. Only admins can add decorations.' });

        }

        const { name, status } = req.body;

          // استخدم الـ admin_id من الـ JWT

          const admin_id = req.user.id;

        // جمع مسارات الصور من الطلب

        const pictures = req.files.map(file => file.path);

        const newDecoration = new Decoration({

            name,

            status,

            pictures,

            admin_id  // يتم ربط الـ admin_id بشكل تلقائي

        });

        await newDecoration.save();

        res.status(201).json(newDecoration);

    } catch (error) {

        res.status(500).json({ message: 'Failed to create decoration', error });

    }

};

هل هذه الطريقة تفي بالغرض في جهة backend?

بتاريخ 13 ساعة قال Raghad Jamal:

مشروع حقيقي للتخرج وفي الحقيقه لا اعرف ماهو حجم الصور ، ستكون صور من مواقع التواصل الاجتماعي لعرض ديكورات صالة معينه ليقوم الزبون برؤية هذه الصور على تطبيقنا ومن تم القيام بالحجز، وبالنسبه لصور الديكورات فان لكل ديكور وضعنا خمس صور upload.array('pictures', 5) 
ولا اعرف ماهو التخزين السحابي انا هذا هو سؤالي هل يجب ان استخدم طرق تخزين اخرى للتعامل مع الصور بشكل صحيح؟

تخزين الصور في MongoDB ليست الطريقة الأفضل وهي ممكنة بالطبع من خلال تخزين الصور بواسطة base64.

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

وللعلم تستطيعي معالجة الصور أولاً بواسطة مكتبة Sharp باستخدامها كـ middleware لضغط الصور قبل تخزينها.

بتاريخ 5 ساعة قال Mustafa Suleiman:

تخزين الصور في MongoDB ليست الطريقة الأفضل وهي ممكنة بالطبع من خلال تخزين الصور بواسطة base64.

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

وللعلم تستطيعي معالجة الصور أولاً بواسطة مكتبة Sharp باستخدامها كـ middleware لضغط الصور قبل تخزينها.

حسنا هل استطيع استخدام firebase لتخزين الصور مع تخزين مسار الصورة في mongodb متلما ذكرت لي؟؟

بتاريخ الآن قال Raghad Jamal:

حسنا هل استطيع استخدام firebase لتخزين الصور مع تخزين مسار الصورة في mongodb متلما ذكرت لي؟؟

لا مشكلة في ذلك.

بتاريخ 27 دقائق مضت قال Mustafa Suleiman:

لا مشكلة في ذلك.

هل استخدام firebase يكون من جهة backend لو تتم برمجتها من جهة frontend ؟ لانني اشعر بالتشتت لانني اقسم مشروعي الى مجلدين مجلد للفرونت اند ومجلد للباك اند

بتاريخ 21 دقائق مضت قال Raghad Jamal:

هل استخدام firebase يكون من جهة backend لو تتم برمجتها من جهة frontend ؟ لانني اشعر بالتشتت لانني اقسم مشروعي الى مجلدين مجلد للفرونت اند ومجلد للباك اند

من الـ back-end ففي الواجهة الأمامية، نرسل بيانات للواجهة الخلفية أو نستقبلها منها.