احتاج مساعدة في رفع الصور من العميل الى الخادم

لاحظ انك فى ملف maincategoryController.js فى الدالة create حين انشاء النموذج فانت تقوم بارسال المتغير image وهو المتغير الذى يحمل الصورة وهذا خطأ حيث انك تريد حفظ مسار الصورة .

ولذلك الحل هو استبدال سطر رقم 13 بالسطر التالى .

const programmes = MainCategory({name,pathname,title, image:req.file.filename, desc});

حيث ان ال req.file.filename تقوم بارجاع اسم الصور الذى تم حفظه على الخادم .

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

بتاريخ 6 دقائق مضت قال محمد_عاطف:

لاحظ انك فى ملف maincategoryController.js فى الدالة create حين انشاء النموذج فانت تقوم بارسال المتغير image وهو المتغير الذى يحمل الصورة وهذا خطأ حيث انك تريد حفظ مسار الصورة .

ولذلك الحل هو استبدال سطر رقم 13 بالسطر التالى .

const programmes = MainCategory({name,pathname,title, image:req.file.filename, desc});

حيث ان ال req.file.filename تقوم بارجاع اسم الصور الذى تم حفظه على الخادم .

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

يظهر لي هذا الخطا 

بتاريخ 17 دقائق مضت قال Ahmed Zehry:

يظهر لي هذا الخطا 

 

هل تم رفع الصورة فى المسار الصحيح ؟

حيث ان المكتبة multer بعد الرفع تقوم بوضع بيانات الصورة فى req.file . وهذا الخطأ يخبرك بانه لا يوجد req.file لذلك يبدو انه لا يتم رفع الصورة .

بتاريخ 4 دقائق مضت قال محمد_عاطف:

هل تم رفع الصورة فى المسار الصحيح ؟

حيث ان المكتبة multer بعد الرفع تقوم بوضع بيانات الصورة فى req.file . وهذا الخطأ يخبرك بانه لا يوجد req.file لذلك يبدو انه لا يتم رفع الصورة .

هذا كود ruote

/**
 * Module dependencies.
 */
const express = require('express');

/**
 * Express router.
 */
const router = express.Router();
 /**
 * Path Module.
 */
const path = require('path');

/**
 * Multer Module.
 */
const multer  = require('multer');

/**
 * Handel multipart/form-data.
 */
const storage = multer.diskStorage({
    destination: 'public/images/',
    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('غبر مسموح رفع هذا الملف'));
    },
});


const controller = require('../controllers/maincategoryController')

/**
 * Auth middleware.
 */
const auth = require('../middlewares/auth')

/**
 * Admin middleware.
 */
const admin = require('../middlewares/admin')

/**
 * Routes.
 */
router.post('/',upload.single('image'), controller.create)
router.put('/:id',  controller.update)
router.delete('/:id',  controller.delete)

router.get('/', controller.list)
router.get('/:id', controller.find)
module.exports = router;

وهذا كود controller 

  const programmes = MainCategory({name,pathname,title, image:req.images.filename, desc});

هل هذه الطريقة صحيحه ام اين الخطا فيها لانها تظهر هذا الخطا 

بتاريخ 2 دقائق مضت قال Ahmed Zehry:

  const programmes = MainCategory({name,pathname,title, image:req.images.filename, desc});

 

هذا السطر خطأ يجب ان يكون image:req.file.filename هكذا كما اخبرتك .

قم بالذهاب الى public/images/ لديك على الخادم وتاكد من انه تم رفع الصورة بنجاح فاذا لم يتم رفع الصورة فان الكود السابق لن يعمل ويبدو انه يوجد خطأ يمنع رفع الصور مثل عدم وجود المسار السابق او خطأ اخر .

لذلك المهم الان هو التاكد من ان الصورة يتم رفعها بشكل صحيح ام لا على الخادم

بتاريخ 1 دقيقة مضت قال محمد_عاطف:

هذا السطر خطأ يجب ان يكون image:req.file.filename هكذا كما اخبرتك .

قم بالذهاب الى public/images/ لديك على الخادم وتاكد من انه تم رفع الصورة بنجاح فاذا لم يتم رفع الصورة فان الكود السابق لن يعمل ويبدو انه يوجد خطأ يمنع رفع الصور مثل عدم وجود المسار السابق او خطأ اخر .

لذلك المهم الان هو التاكد من ان الصورة يتم رفعها بشكل صحيح ام لا على الخادم

 

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

بتاريخ 31 دقائق مضت قال Ahmed Zehry:

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

 

قم بارجاع السطر السابق كما كان سابقا هكذا.

const programmes = MainCategory({name,pathname,title, image, desc});

وقم بمحاولة رفع الصورة واخبرنى هل يتم رفعها الى الخادم ام لا فى مسار public/images/  فاذا لم يتم رفعها الى الخادم فيبدو انه توجد مشكلة لديك فى الخادم .

هذا كود العميل الذي يقوم بارسال البيانات الى الخادم 

import React, { useEffect, useState } from 'react'
import { AppFooter, AppHeader, AppSidebar, DocsExample } from '../../../components'
import axios from 'axios'
import { CButton, CForm, CFormInput, CFormLabel, CFormTextarea } from '@coreui/react'
export default function programs() {
  const [name, setname] = useState('')
  const [image, setimage] = useState(null)
  const [pathname, setpath] = useState('')
  const [title, settitle] = useState()
  const handleImageChange = (e) => {
    const file = e.target.files[0];
  	const formData = new FormData();
    formData.append("image", file);
    setimage(formData);
  };
  const config = {
    headers: {
      "Content-Type": "multipart/form-data",
    },
  };
  const handleSubmit = async (e) => {
    e.preventDefault()
    try {
      await axios.post('https://api.wesamelnagah.com/api/maincategory', {
        name,
        pathname,
        image,

        // title
      }, config
      )
      await axios.post('https://api.wesamelnagah.com/api/uplode',image, {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      })
      setname('')
      setimage(null)
      setpath('')
    } catch (error) {
      console.log(error)
    }
  }

  return (
    <div className="programs_container">
      <AppSidebar />
      <div className="wrapper d-flex flex-column min-vh-100">
        <AppHeader />
        <div className="body flex-grow-1">
          <CForm onSubmit={handleSubmit}>
            <div className="mb-3">
              <CFormLabel htmlFor="exampleFormControlInput1"> عنوان الباقة</CFormLabel>
              <CFormInput
                type="text"
                id="exampleFormControlInput1"
                onChange={(e) => setname(e.target.value)}
              />
              <CFormLabel htmlFor="exampleFormControlInput1"> مسار الباقة</CFormLabel>
              <CFormInput
                type="text"
                id="exampleFormControlInput1"
                onChange={(e) => setpath(e.target.value)}
              />
            </div>
            <div className="mb-3">
              <CFormLabel htmlFor="formFile">صورة الباقة</CFormLabel>
              <CFormInput type="file" id="formFile" onChange={handleImageChange} />
            </div>
            <div className="d-grid gap-2 col-6 mx-auto">
              <CButton color="primary" type="submit">
                Submit
              </CButton>
            </div>
          </CForm>
        </div>
        <AppFooter />
      </div>
    </div>
  )
}

الصورة التي ترسل الى uplode  تصل الى المسار الخاص بها اما التي ترسل الى /maincategory  لا يصل الى public/images/ 

بتاريخ 22 دقائق مضت قال محمد_عاطف:

قم بارجاع السطر السابق كما كان سابقا هكذا.

const programmes = MainCategory({name,pathname,title, image, desc});

وقم بمحاولة رفع الصورة واخبرنى هل يتم رفعها الى الخادم ام لا فى مسار public/images/  فاذا لم يتم رفعها الى الخادم فيبدو انه توجد مشكلة لديك فى الخادم .

بتاريخ 16 دقائق مضت قال Ahmed Zehry:

await axios.post('https://api.wesamelnagah.com/api/maincategory', {
        name,
        pathname,
        image,

        // title
      }, config
      )

الخطأ هنا لديك فى كود الواجهة الامامية .

قم باسبتدال الكود السابق بهذا الكود .

const formData = new FormData();
      formData.append('name',name);
      formData.append('pathname',pathname);
      formData.append('image',image);
      await axios.post('https://api.wesamelnagah.com/api/maincategory', formData,{
        headers: {
          "Content-Type": "multipart/form-data",
        },
      })

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

بتاريخ 3 دقائق مضت قال محمد_عاطف:

الخطأ هنا لديك .

قم باسبتدال الكود السابق بهذا الكود .

const formData = new FormData();
      formData.append('name',name);
      formData.append('pathname',pathname);
      formData.append('image',image);
      await axios.post('https://api.wesamelnagah.com/api/maincategory', formData,{
        headers: {
          "Content-Type": "multipart/form-data",
        },
      })

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

اولا الصورة لا تظهر في مسار 
ثانيا :بيانات  الصورة في مونجو تظهر هكذا 

{
  "_id": {
    "$oid": "663130bf7ae7f1e84fa6e37e"
  },
  "name": "سيبلسيبل",
  "pathname": "بليسبليبل",
  "title": "سيبلسيبل",
  "desc": [
    ""
  ],
  "image": "[object FormData]",
  "createdAt": {
    "$date": "2024-04-30T17:56:15.554Z"
  },
  "updatedAt": {
    "$date": "2024-04-30T17:56:15.554Z"
  },
  "__v": 0
}

بتاريخ 3 دقائق مضت قال Ahmed Zehry:

اولا الصورة لا تظهر في مسار 

قم باستبدال الدالتين handleSubmit و handleImageChange

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

const handleImageChange = (e) => {
    const file = e.target.files[0];
    setimage(file);
  };
  const handleSubmit = async (e) => {
    e.preventDefault()
    try {
      const formData = new FormData();
      formData.append('name',name);
      formData.append('pathname',pathname);
      formData.append('image',image);
      await axios.post('https://api.wesamelnagah.com/api/maincategory', formData,{
        headers: {
          "Content-Type": "multipart/form-data",
        },
      })
      await axios.post('https://api.wesamelnagah.com/api/uplode',formData, {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      })
      setname('')
      setimage(null)
      setpath('')
    } catch (error) {
      console.log(error)
    }
  }

والان من المفترض ان يتم حفظ الصورة على الخادم وفى قاعدة البيانات بشكل صحيح

بتاريخ 8 دقائق مضت قال محمد_عاطف:

قم باستبدال الدالتين handleSubmit و handleImageChange

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

const handleImageChange = (e) => {
    const file = e.target.files[0];
    setimage(file);
  };
  const handleSubmit = async (e) => {
    e.preventDefault()
    try {
      const formData = new FormData();
      formData.append('name',name);
      formData.append('pathname',pathname);
      formData.append('image',image);
      await axios.post('https://api.wesamelnagah.com/api/maincategory', formData,{
        headers: {
          "Content-Type": "multipart/form-data",
        },
      })
      await axios.post('https://api.wesamelnagah.com/api/uplode',formData, {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      })
      setname('')
      setimage(null)
      setpath('')
    } catch (error) {
      console.log(error)
    }
  }

والان من المفترض ان يتم حفظ الصورة على الخادم وفى قاعدة البيانات بشكل صحيح

ظهر هذا الخطا