محمود_سعداوي نشر 29 أكتوبر 2023 أرسل تقرير مشاركة نشر 29 أكتوبر 2023 في الكود التالي const postImage = (e) => { e.preventDefault(); const formData = new FormData(); formData.append("imageTitle", imageTitle); formData.append("imageDescription", imageDescription); console.log({ formData }) console.log({imageDescription}, {imageTitle}) if (image) { formData.append('image', 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) }) .catch((error) => console.log(error.response.data.errors[0].msg)); }; تتم طباعة imageDescription و imageTitle بينما formData تظهر فارغة {imageDescription: 'fdgdrhrrrrrrr'} {imageTitle: 'dd'} *********************** formData: FormData[[Prototype]]: FormData[[Prototype]]: Objectconstructor: ƒ Object()hasOwnProperty: ƒ hasOwnProperty()isPrototypeOf: ƒ isPrototypeOf()propertyIsEnumerable: ƒ propertyIsEnumerable()toLocaleString: ƒ toLocaleString()toString: ƒ toString()valueOf: ƒ valueOf()__defineGetter__: ƒ __defineGetter__()__defineSetter__: ƒ __defineSetter__()__lookupGetter__: ƒ __lookupGetter__()__lookupSetter__: ƒ __lookupSetter__()__proto__: (…)get __proto__: ƒ __proto__()set __proto__: ƒ __proto__() شكرا على المساعدة 2 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عمر قره محمد نشر 29 أكتوبر 2023 أرسل تقرير مشاركة نشر 29 أكتوبر 2023 هذا طبيعي لأن FormData هو عبارة عن class وإذا كان هدفك هو التحقق من كون الـ formData يحتوي على قيمة معينة فيمكنك القيام بذلك باستخدام الوظيفة get التي يقدمها هذا ال class كالتالي : formData.get("key"); حيث ان key هنا هو اسم الحقل وهذا مثال كامل : const formData = new FormData(); formData.append("key", "value"); console.log(formData.get("key")); // value 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Mustafa Suleiman نشر 29 أكتوبر 2023 أرسل تقرير مشاركة نشر 29 أكتوبر 2023 عليك عرض البيانات في كائن FormData باستخدام أساليب مثل get(), getAll(), و entries(). وتلك الأساليب تسمح لك باسترجاع البيانات المحفوظة في FormData بشكل مناسب، وذلك لأن FormData هو كلاس. get(name) تستخدم للحصول على قيمة محددة بناءًا على اسمها. const formData = new FormData(); formData.append("name", "mahmoud"); const name = formData.get("name"); console.log(name); // سيطبع "mahmoud" getAll(name) تستخدم للحصول على قائمة بالقيم المرتبطة بنفس الاسم. const formData = new FormData(); formData.append("hobbies", "Reading"); formData.append("hobbies", "Swimming"); const hobbies = formData.getAll("hobbies"); console.log(hobbies); // سيطبع ["Reading", "Swimming"] entries() تستخدم للحصول على مصفوفة مفاتيح وقيم FormData. const formData = new FormData(); formData.append("name", "mahmoud"); formData.append("age", 30); for (const entry of formData.entries()) { console.log(entry); } // سيطبع: // ["name", "mahmoud"] // ["age", "30"] 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 محمود_سعداوي نشر 29 أكتوبر 2023 الكاتب أرسل تقرير مشاركة نشر 29 أكتوبر 2023 بتاريخ 2 ساعة قال Mustafa Suleiman: عليك عرض البيانات في كائن FormData باستخدام أساليب مثل get(), getAll(), و entries(). وتلك الأساليب تسمح لك باسترجاع البيانات المحفوظة في FormData بشكل مناسب، وذلك لأن FormData هو كلاس. get(name) تستخدم للحصول على قيمة محددة بناءًا على اسمها. const formData = new FormData(); formData.append("name", "mahmoud"); const name = formData.get("name"); console.log(name); // سيطبع "mahmoud" getAll(name) تستخدم للحصول على قائمة بالقيم المرتبطة بنفس الاسم. const formData = new FormData(); formData.append("hobbies", "Reading"); formData.append("hobbies", "Swimming"); const hobbies = formData.getAll("hobbies"); console.log(hobbies); // سيطبع ["Reading", "Swimming"] entries() تستخدم للحصول على مصفوفة مفاتيح وقيم FormData. const formData = new FormData(); formData.append("name", "mahmoud"); formData.append("age", 30); for (const entry of formData.entries()) { console.log(entry); } // سيطبع: // ["name", "mahmoud"] // ["age", "30"] شكرا. لكن لماذا عندما أقوم بإرسال البيانات يقع إعلامي بأن الحقول فارغة مثلا في المثال الذي قدمته يعلمني بأن لا بد من إدخال حقل imageTitle اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عمر قره محمد نشر 29 أكتوبر 2023 أرسل تقرير مشاركة نشر 29 أكتوبر 2023 بتاريخ 3 دقائق مضت قال محمود سعداوي2: شكرا. لكن لماذا عندما أقوم بإرسال البيانات يقع إعلامي بأن الحقول فارغة مثلا في المثال الذي قدمته يعلمني بأن لا بد من إدخال حقل imageTitle هل تستخدم body-parser في طرف النود، بالحالة الافتراضية لا يستطيع خادم express الوصول إلى الـ body ولذلك يجب ان تستخدم الوظيفة الوسيطة body-parser حتى تصل لهذه الحقول : var express = require('express') var bodyParser = require('body-parser') var app = express() // parse application/x-www-form-urlencoded app.use(bodyParser.urlencoded({ extended: false })) // parse application/json app.use(bodyParser.json()) في حال كنت تستخدم body-parser بالفعل فأنا احتاج لكامل ملفات المشروح حتى استطيع تحديد سبب المشكلة 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 محمود_سعداوي نشر 29 أكتوبر 2023 الكاتب أرسل تقرير مشاركة نشر 29 أكتوبر 2023 بتاريخ الآن قال عمر قره محمد: هل تستخدم body-parser في طرف النود، بالحالة الافتراضية لا يستطيع خادم express الوصول إلى الـ body ولذلك يجب ان تستخدم الوظيفة الوسيطة body-parser حتى تصل لهذه الحقول : var express = require('express') var bodyParser = require('body-parser') var app = express() // parse application/x-www-form-urlencoded app.use(bodyParser.urlencoded({ extended: false })) // parse application/json app.use(bodyParser.json()) في طرف الخادم أستعمل multer 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 ); ************************************ filename = ""; 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, category: req.body.category, 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"); } }; مع العلم أني لم أجد أي مشكل مع postman اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عمر قره محمد نشر 29 أكتوبر 2023 أرسل تقرير مشاركة نشر 29 أكتوبر 2023 قم بمشاركة كامل ملفات المشروع رجاءً 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 محمود_سعداوي نشر 29 أكتوبر 2023 الكاتب أرسل تقرير مشاركة نشر 29 أكتوبر 2023 بتاريخ 3 دقائق مضت قال عمر قره محمد: قم بمشاركة كامل ملفات المشروع رجاءً تفضل Nouveau dossier.zip شكرا Nouveau dossier.zip اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
محمود_سعداوي
في الكود التالي
const postImage = (e) => { e.preventDefault(); const formData = new FormData(); formData.append("imageTitle", imageTitle); formData.append("imageDescription", imageDescription); console.log({ formData }) console.log({imageDescription}, {imageTitle}) if (image) { formData.append('image', 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) }) .catch((error) => console.log(error.response.data.errors[0].msg)); };
تتم طباعة imageDescription و imageTitle بينما formData تظهر فارغة
{imageDescription: 'fdgdrhrrrrrrr'} {imageTitle: 'dd'} *********************** formData: FormData[[Prototype]]: FormData[[Prototype]]: Objectconstructor: ƒ Object()hasOwnProperty: ƒ hasOwnProperty()isPrototypeOf: ƒ isPrototypeOf()propertyIsEnumerable: ƒ propertyIsEnumerable()toLocaleString: ƒ toLocaleString()toString: ƒ toString()valueOf: ƒ valueOf()__defineGetter__: ƒ __defineGetter__()__defineSetter__: ƒ __defineSetter__()__lookupGetter__: ƒ __lookupGetter__()__lookupSetter__: ƒ __lookupSetter__()__proto__: (…)get __proto__: ƒ __proto__()set __proto__: ƒ __proto__()
شكرا على المساعدة
رابط هذا التعليق
شارك على الشبكات الإجتماعية
7 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.