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

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

formData.get("key");

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

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

عليك عرض البيانات في كائن 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"]

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

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

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

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

قم بمشاركة كامل ملفات المشروع رجاءً

بتاريخ 3 دقائق مضت قال عمر قره محمد:

قم بمشاركة كامل ملفات المشروع رجاءً

تفضل

Nouveau dossier.zip

شكرا

Nouveau dossier.zip