محمود_سعداوي نشر 12 نوفمبر 2023 أرسل تقرير مشاركة نشر 12 نوفمبر 2023 السلام عليكم. أواجه مشكل في إرسال بيانات تحتوي صورة بعد تعديلها إلى الخادم. الكود في طرف العميل /** * Update Image Informations */ const [image, setImage] = useState(imageSrc) const [imagePhoto, setImagePhoto] = useState(null) const [title, setTitle] = useState("") const [description, setDescription] = useState("") // console.log(imagePhoto?.name) useEffect(() => { if (current_photo) { setTitle(current_photo?.title || ""); setDescription(current_photo?.description || ""); setImage(imageSrc || ""); } }, [current_photo, imageSrc]); // Handle Change Photo const handleFileChange = (e) => { if (e.target.files && e.target.files[0]) { setImage(URL.createObjectURL(e.target.files[0])); setImagePhoto(e.target.files[0]); } }; const updateImg = (e) => { e.preventDefault(); const formData = new FormData(); formData.append("title", title); formData.append("description", description); if (imagePhoto) { formData.append("photo", imagePhoto, imagePhoto?.name); } // formData.append("photo", imagePhoto) axios .post(`/api/images/user_images/${current_photo?._id}`, formData, { headers: { "Content-Type": "multipart/form-data", "x-auth-token": user.data?.token, }, }) .then((res) => { console.log(res.data); navigate("/"); }) .catch((error) => console.error(error)); }; في طرف الخادم // router router.post("/user_images/:photoId", [upload.single('photo'), protect], editImg); // controller const editImg = async (req, res) => { try { const post = await Image.findById(req.params.photoId) post.title = req.file.title post.description = req.file.description post.photo = req.file ? req.file.filename : post.photo; const updatedPost = await post.save() res.status(200).json(updatedPost); } catch (error) { res.status(500).send("Server error" + error.message); } }; شكرا على المساعدة. 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Mustafa Suleiman نشر 12 نوفمبر 2023 أرسل تقرير مشاركة نشر 12 نوفمبر 2023 أرجو أن ترفق مجلد المشروع لتفقد المشكلة. 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 محمود_سعداوي نشر 12 نوفمبر 2023 الكاتب أرسل تقرير مشاركة نشر 12 نوفمبر 2023 بتاريخ 16 دقائق مضت قال Mustafa Suleiman: أرجو أن ترفق مجلد المشروع لتفقد المشكلة. تفضل أخي الكريمhsoub.zip 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Mustafa Suleiman نشر 12 نوفمبر 2023 أرسل تقرير مشاركة نشر 12 نوفمبر 2023 @محمود سعداوي2 لم يحدث مشكلة في عملية رفع الصورة عند الضغط على share image وإختيار الصورة وكتابة العنوان والوصف، تم الإرسال وظهرت الصورة في الصفحة الرئيسية كالتالي: حاول حذف أي بيانات في local storage ثم تسجيل الخروج وتسجيل الدخول مرة أخرى، وحاول رفع الصورة. بعد ذلك قمت بتعديل الصورة من المف الشخصي وتم تعديل العنوان كالتالي: 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 محمود_سعداوي نشر 12 نوفمبر 2023 الكاتب أرسل تقرير مشاركة نشر 12 نوفمبر 2023 بتاريخ 29 دقائق مضت قال Mustafa Suleiman: @محمود سعداوي2 لم يحدث مشكلة في عملية رفع الصورة عند الضغط على share image وإختيار الصورة وكتابة العنوان والوصف، تم الإرسال وظهرت الصورة في الصفحة الرئيسية كالتالي: حاول حذف أي بيانات في local storage ثم تسجيل الخروج وتسجيل الدخول مرة أخرى، وحاول رفع الصورة. بعد ذلك قمت بتعديل الصورة من المف الشخصي وتم تعديل العنوان كالتالي: شكرا. عندما أعدت تشغيل البرنامج صار كل شيء على مايرام شكرا اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
محمود_سعداوي
السلام عليكم.
أواجه مشكل في إرسال بيانات تحتوي صورة بعد تعديلها إلى الخادم.
الكود في طرف العميل
/** * Update Image Informations */ const [image, setImage] = useState(imageSrc) const [imagePhoto, setImagePhoto] = useState(null) const [title, setTitle] = useState("") const [description, setDescription] = useState("") // console.log(imagePhoto?.name) useEffect(() => { if (current_photo) { setTitle(current_photo?.title || ""); setDescription(current_photo?.description || ""); setImage(imageSrc || ""); } }, [current_photo, imageSrc]); // Handle Change Photo const handleFileChange = (e) => { if (e.target.files && e.target.files[0]) { setImage(URL.createObjectURL(e.target.files[0])); setImagePhoto(e.target.files[0]); } }; const updateImg = (e) => { e.preventDefault(); const formData = new FormData(); formData.append("title", title); formData.append("description", description); if (imagePhoto) { formData.append("photo", imagePhoto, imagePhoto?.name); } // formData.append("photo", imagePhoto) axios .post(`/api/images/user_images/${current_photo?._id}`, formData, { headers: { "Content-Type": "multipart/form-data", "x-auth-token": user.data?.token, }, }) .then((res) => { console.log(res.data); navigate("/"); }) .catch((error) => console.error(error)); };
في طرف الخادم
// router router.post("/user_images/:photoId", [upload.single('photo'), protect], editImg); // controller const editImg = async (req, res) => { try { const post = await Image.findById(req.params.photoId) post.title = req.file.title post.description = req.file.description post.photo = req.file ? req.file.filename : post.photo; const updatedPost = await post.save() res.status(200).json(updatedPost); } catch (error) { res.status(500).send("Server error" + error.message); } };
شكرا على المساعدة.
رابط هذا التعليق
شارك على الشبكات الإجتماعية
4 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.