اذهب إلى المحتوى
  • 0

خطأ عند إستعمال FormData في node js

محمود_سعداوي

السؤال

في الكود التالي

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__()

شكرا على المساعدة

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

هذا طبيعي لأن FormData هو عبارة عن class وإذا كان هدفك هو التحقق من كون الـ formData يحتوي على قيمة معينة فيمكنك القيام بذلك باستخدام الوظيفة get التي يقدمها هذا ال class  كالتالي :

formData.get("key");

حيث ان key هنا هو اسم الحقل وهذا مثال كامل :

const formData = new FormData();
formData.append("key", "value");
console.log(formData.get("key")); // value

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

عليك عرض البيانات في كائن 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"]
رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 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 بالفعل فأنا احتاج لكامل ملفات المشروح حتى استطيع تحديد سبب المشكلة

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ الآن قال عمر قره محمد:

هل تستخدم 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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...