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

Ahmed Zehry · 30 أبريل

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

محمد عاطف17 · 30 أبريل

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

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

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

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

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

Ahmed Zehry · 30 أبريل

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

ولذلك الحل هو استبدال سطر رقم 13 بالسطر التالى .
const programmes = MainCategory({name,pathname,title, image:req.file.filename, desc});
حيث ان ال req.file.filename تقوم بارجاع اسم الصور الذى تم حفظه على الخادم .

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

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

تم التعديل في 30 أبريل بواسطة Ahmed Zehry

محمد عاطف17 · 30 أبريل

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

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

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

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

Ahmed Zehry · 30 أبريل

بتاريخ 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});

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

محمد عاطف17 · 30 أبريل

بتاريخ 2 دقائق مضت قال Ahmed Zehry:
  const programmes = MainCategory({name,pathname,title, image:req.images.filename, desc});

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

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

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

Ahmed Zehry · 30 أبريل

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

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

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

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

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

محمد عاطف17 · 30 أبريل

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

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

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

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

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

Ahmed Zehry · 30 أبريل

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

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/ فاذا لم يتم رفعها الى الخادم فيبدو انه توجد مشكلة لديك فى الخادم .

محمد عاطف17 · 30 أبريل

بتاريخ 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",
        },
      })

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

Ahmed Zehry · 30 أبريل

بتاريخ 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
}

محمد عاطف17 · 30 أبريل

بتاريخ 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)
    }
  }

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

Ahmed Zehry · 30 أبريل

بتاريخ 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)
    }
  }

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

ظهر هذا الخطا

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

السؤال

Ahmed Zehry

12 أجوبة على هذا السؤال

Recommended Posts

محمد عاطف17

Ahmed Zehry

محمد عاطف17

Ahmed Zehry

محمد عاطف17

Ahmed Zehry

محمد عاطف17

Ahmed Zehry

محمد عاطف17

Ahmed Zehry

محمد عاطف17

Ahmed Zehry

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية