محمود_سعداوي نشر 29 أكتوبر 2023 أرسل تقرير مشاركة نشر 29 أكتوبر 2023 السلام عليكم. أواجه مشكل في إرسال وصف الصورة (Post Method) من طرف العميل (react js) إلى الخادم (node mongo express) و ذلك باستعمال multer الكود في طرف الخادم function ShareImageComponent({}) { const [image, setImage] = useState(null); const [imageTitle, setImageTitle] = useState(""); const [imageDescription, setImageDescription] = useState(""); const user = JSON.parse(localStorage.getItem("user")); const onInputChange = (e) => { if (e.target.files && e.target.files[0]) { const file = e.target.files[0]; if (file) { const reader = new FileReader(); reader.onload = (event) => { const imageUrl = event.target.result; setImage(imageUrl); }; reader.readAsDataURL(file); } } }; /** * Post Image */ const postImage = (e) => { e.preventDefault(); const formData = new FormData(); formData.append("title", imageTitle); formData.append("description", imageDescription); if (image) { formData.append('photo', image) } axios .post("/api/images/new_image", formData, { headers: { "Content-Type": "multipart/form-data", "x-auth-token": user.data?.token, }, }) .then((res) => { console.log(res?.data.data) }) .catch((error) => console.log(error.response.data)); }; return ( <div className="share-container"> <div className="share-img"> <img alt="" src={image} /> </div> <form encType="multipart/form-data" className="share-form-container" onSubmit={(e)=>postImage(e)} > <div className="image-upload"> <label onChange={onInputChange} htmlFor="formId"> <input name="photo" type="file" id="formId" accept="image/*" hidden /> click to upload </label> </div> <input type="text" className="share-title" placeholder="Title ..." name="title" value={imageTitle} onChange={(e) => setImageTitle(e.target.value)} /> <textarea type="text" className="share-description" placeholder="Image Description ..." name="description" value={imageDescription} onChange={(e) => setImageDescription(e.target.value)} /> <button className="submit" type="submit"> Share </button> </form> </div> ); } Image Model const ImageSchema = new Schema({ user: { type: mongoose.Schema.Types.ObjectId, ref: "user", }, title: { type: String, required: true }, description: { type: String, required: true }, photo: { type: String, required: true }, likes: [ { user: { type: Schema.Types.ObjectId } } ], comments: [ { user: { type: Schema.Types.ObjectId }, text: { type: String }, date: { type: Date, default: Date.now } } ], date: { type: Date, default: Date.now } }); route const storage = multer.diskStorage({ destination: function (req, file, cb) { cb(null, path.join(__dirname, "../../client/src/assets/images/")); }, filename: function (req, file, cb) { cb(null, new Date().toISOString().replace(/:/g, "-") + file.originalname); }, }); const upload = multer({ storage: storage }); router.post( "/new_image", [ upload.single("photo"), [ check("title", "Please enter a title").not().isEmpty(), check("description", "Please enter a description ").not().isEmpty(), ], protect, ], createImg ); controller const createImg = async (req, res) => { const errors = validationResult(req); if (!errors.isEmpty()) { return res.status(400).json({ errors: errors.array() }); } try { // Create New Image const user = await User.findById(req.user.id); if (!user) { return res.status(404).json({ error: "User not found" }); } // const author = user.name; const newImg = new Image({ title: req.body.title, description: req.body.description, photo: req.file?.filename, user: req.user.id, name: user.name, }); const img = await newImg.save(); res.json(img); } catch (error) { console.log(error); res.status(500).send("Server error"); } }; رسالة الخطأ في طرف العميل (console) Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '0') رسالة الخطأ في طرف الخادم Error: image validation failed: photo: Path `photo` is required. at ValidationError.inspect (C:\Users\saadaoui\Desktop\photaty\server\node_modules\mongoose\lib\error\validation.js:50:26) at formatValue (node:internal/util/inspect:806:19) at inspect (node:internal/util/inspect:365:10) at formatWithOptionsInternal (node:internal/util/inspect:2273:40) at formatWithOptions (node:internal/util/inspect:2135:10) at console.value (node:internal/console/constructor:340:14) at console.log (node:internal/console/constructor:377:61) at createImg (C:\Users\saadaoui\Desktop\photaty\server\controllers\ImgCtr.js:29:13) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) { errors: { photo: ValidatorError: Path `photo` is required. at validate (C:\Users\saadaoui\Desktop\photaty\server\node_modules\mongoose\lib\schematype.js:1364:13) at SchemaType.doValidate (C:\Users\saadaoui\Desktop\photaty\server\node_modules\mongoose\lib\schematype.js:1348:7) at C:\Users\saadaoui\Desktop\photaty\server\node_modules\mongoose\lib\document.js:2958:18 at process.processTicksAndRejections (node:internal/process/task_queues:77:11) { properties: [Object], kind: 'required', path: 'photo', value: undefined, reason: undefined, [Symbol(mongoose:validatorError)]: true } }, _message: 'image validation failed' } شكرا على المساعدة اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عمر قره محمد نشر 30 أكتوبر 2023 أرسل تقرير مشاركة نشر 30 أكتوبر 2023 قم بمشاركة المجلد الخاص بالمشروع بالكامل رجاءً حتى استطيع تجريب الكود، إذا لم تعلم كيفية مشاركة مجلد المشروع فما عليك فعله هو ضغط المجلد اولاً ومن ثم مشاركته في التعليقات مثل : 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Mustafa Suleiman نشر 30 أكتوبر 2023 أرسل تقرير مشاركة نشر 30 أكتوبر 2023 المشكلة الرئيسية هي أن حقل "photo" في مخطط الصورة (ImageSchema) يُعتبر إلزاميًا (required: true)، ولكنه ليس موجودًا في البيانات المرسلة من طرف العميل عندما يتم إرسال الصورة، وذلك هو السبب في ظهور رسالة الخطأ "Path photo is required." في طرف الخادم. حاول طباعة البيانات المرسلة console.log(formData) لرؤية محتوى البيانات التي تم إرسالها إلى الخادم. 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 محمود_سعداوي نشر 30 أكتوبر 2023 الكاتب أرسل تقرير مشاركة نشر 30 أكتوبر 2023 بتاريخ 23 ساعة قال محمود سعداوي2: const onInputChange = (e) => { if (e.target.files && e.target.files[0]) { const file = e.target.files[0]; if (file) { const reader = new FileReader(); reader.onload = (event) => { const imageUrl = event.target.result; setImage(imageUrl); }; reader.readAsDataURL(file); } } }; المشكل في هذا الكود قمت باستبداله بالكود التالي const onInputChange = (e) => { if (e.target.files && e.target.files[0]) { setImage(URL.createObjectURL(e.target.files[0])); setAvatar(e.target.files[0]); } }; اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
محمود_سعداوي
السلام عليكم.
أواجه مشكل في إرسال وصف الصورة (Post Method) من طرف العميل (react js) إلى الخادم (node mongo express) و ذلك باستعمال multer
الكود في طرف الخادم
Image Model
const ImageSchema = new Schema({ user: { type: mongoose.Schema.Types.ObjectId, ref: "user", }, title: { type: String, required: true }, description: { type: String, required: true }, photo: { type: String, required: true }, likes: [ { user: { type: Schema.Types.ObjectId } } ], comments: [ { user: { type: Schema.Types.ObjectId }, text: { type: String }, date: { type: Date, default: Date.now } } ], date: { type: Date, default: Date.now } });
route
const storage = multer.diskStorage({ destination: function (req, file, cb) { cb(null, path.join(__dirname, "../../client/src/assets/images/")); }, filename: function (req, file, cb) { cb(null, new Date().toISOString().replace(/:/g, "-") + file.originalname); }, }); const upload = multer({ storage: storage }); router.post( "/new_image", [ upload.single("photo"), [ check("title", "Please enter a title").not().isEmpty(), check("description", "Please enter a description ").not().isEmpty(), ], protect, ], createImg );
controller
const createImg = async (req, res) => { const errors = validationResult(req); if (!errors.isEmpty()) { return res.status(400).json({ errors: errors.array() }); } try { // Create New Image const user = await User.findById(req.user.id); if (!user) { return res.status(404).json({ error: "User not found" }); } // const author = user.name; const newImg = new Image({ title: req.body.title, description: req.body.description, photo: req.file?.filename, user: req.user.id, name: user.name, }); const img = await newImg.save(); res.json(img); } catch (error) { console.log(error); res.status(500).send("Server error"); } };
رسالة الخطأ في طرف العميل (console)
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '0')
رسالة الخطأ في طرف الخادم
Error: image validation failed: photo: Path `photo` is required. at ValidationError.inspect (C:\Users\saadaoui\Desktop\photaty\server\node_modules\mongoose\lib\error\validation.js:50:26) at formatValue (node:internal/util/inspect:806:19) at inspect (node:internal/util/inspect:365:10) at formatWithOptionsInternal (node:internal/util/inspect:2273:40) at formatWithOptions (node:internal/util/inspect:2135:10) at console.value (node:internal/console/constructor:340:14) at console.log (node:internal/console/constructor:377:61) at createImg (C:\Users\saadaoui\Desktop\photaty\server\controllers\ImgCtr.js:29:13) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) { errors: { photo: ValidatorError: Path `photo` is required. at validate (C:\Users\saadaoui\Desktop\photaty\server\node_modules\mongoose\lib\schematype.js:1364:13) at SchemaType.doValidate (C:\Users\saadaoui\Desktop\photaty\server\node_modules\mongoose\lib\schematype.js:1348:7) at C:\Users\saadaoui\Desktop\photaty\server\node_modules\mongoose\lib\document.js:2958:18 at process.processTicksAndRejections (node:internal/process/task_queues:77:11) { properties: [Object], kind: 'required', path: 'photo', value: undefined, reason: undefined, [Symbol(mongoose:validatorError)]: true } }, _message: 'image validation failed' }
شكرا على المساعدة
رابط هذا التعليق
شارك على الشبكات الإجتماعية
3 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.