إضافة صورة شخصية للمستخدم في تطبيق Nodejs

لدعم استعمال الصور في مشروع يوجد عدة خطوات للقيام بها، هذا الموضوع متغير حسب نوع مدير قواعد البيانات ولغات البرمجية المستخدمة ..

يمكن الاعتماد على الأفكار التالية:

• لا يتم تخزين الصور في قاعدة البيانات 
• نضع في قاعدة البيانات اسم الصورة فقط ليكون حجم قاعدة البيانات أقل وبالتالي أخف عبئ على مدير قواعد البيانات
• يتم رفع ملف الصورة بشكل منفصل كملف يتم تمريره على المخدم
• نربط بين ملف الصورة وقاعدة البيانات عن طريق إما مسار الصورة أو اسمها
• يتم تخزين الصورة على المخدم كملف ضمن نظام إداة الملفات File Sytem مثلما ترى الصور ضمن مجلدات لديك..
• إن كنت تستخدم مكتبة تعتمد أسلوب/هيكلية النماذج نضيف خاصية الصورة كسلسلة نصية

لاحظ حقل avatar في بنية وثيقة المستخدم

const ModelSchema = new mongoose.Schema({
    name: {
        type: String,
        required: true,
        maxlength: 20
    },
    username: {
        type: String,
        required: true,
        unique: true,
        maxlength: 20
    },
    password: {
        type: String,
        required: true
    },
    about: {
        type: String,
        maxlength: 100
    },
    avatar: String,
});

ثم يصبح له حقل في قاعدة البيانات، وباقي الأمور هي عملية رفع الصورة، ممكن نستخدم مكتبة multer في قسم back end 

const multer  = require('multer');

/**
 * Handel multipart/form-data.   الوصول للتخزين 
 */
const storage = multer.diskStorage({
    destination: 'public/uploads/',
    filename: function (req, file, cb) {
        cb(null, Date.now() + path.extname(file.originalname))
    }
});

/**
 * User profile middleware.    رفع الصورة
 */
const upload = multer({
    limits: { fileSize: 1024 * 1024 },
    storage: storage ,
    fileFilter: (req, file, cb) => {
        let fileTypes = /jpeg|jpg|png/;
        let mimeType = fileTypes.test(file.mimetype);
        let extname = fileTypes.test(path.extname(file.originalname).toLowerCase());
        if (mimeType && extname)  return cb(null, true);
        cb(new Error('غبر مسموح رفع هذا الملف'));
    },
});

أما

• في Front end نستخدم form data + axios
• يحدد المستخدم رابط ملف الصورة 
• نضيف مسار الصورة لحالة التطبيق
• يتم تقسيم الملف لأجزاء صغيرة وإرفاقه مع الطلبية

    onImageChange = e => {
        if (e.target.files && e.target.files[0]) {
            this.setState({
                image: URL.createObjectURL(e.target.files[0]),
                avatar: e.target.files[0]
            });
        }
    };

    /**
     * Change form handler
     * @param e
     */
    onChange = e => this.setState({[e.target.name]: e.target.value, error: null});

    /**
     * Form submit handler.
     * @param e
     */
    onSubmit = e => {
        e.preventDefault();
        const data = new FormData();
        data.append('name', this.state.name);
        data.append('about', this.state.about);
        if (this.state.avatar) data.append('avatar', this.state.avatar, this.state.avatar.name);
        axios.post('/api/account', data)
        .then(this.props.toggle)
        .catch(err => this.setState({
            error: err.response.data.message
        }));
    };

يمكنك الاستفادة من السؤال:

• أي بيانات غير نصية نخزنها خارج قاعدة البيانات.
• يوجد أكثر من طريقة برفع الملف مثل multer وغيرها من المكتبات