إرسال FormData من الواجهة الخلفية إلى الخادم لا يعمل

عندما تعمل مع ReactJS وتقوم بإرسال بيانات النموذج باستخدام FormData إلى الواجهة الخلفية، قد تواجه أحيانًا مشكلة حيث تكون req.body في الخلفية null. من المهم فهم كيفية عمل FormData وكيفية التعامل مع الملفات والبيانات المرسلة بشكل صحيح.

ما هو FormData وما أهميته؟

FormData هو كائن يمكن استخدامه لإرسال بيانات نموذج على هيئة متعددة الأجزاء (multipart/form-data)، والذي يساعد في التعامل مع الملفات والنماذج القابلة للإرسال. عندما تقوم بإنشاء كائن FormData وإضافة ملفات وبيانات إليه، يصبح لديك وسيلة فعالة لإرسال معلومات معقدة تتضمن نصوص وصور بسهولة.

خطوات إرسال FormData من الواجهة الأمامية إلى الخلفية

عند إعداد النموذج لإرسال البيانات، يجب عليك التأكد من أن البيانات تتم معالجتها بشكل صحيح. يتم إنشاء كائن FormData باستخدام new FormData()، حيث يمكنك استخدام دالة append() لإضافة الملفات والبيانات المطلوبة. إليك كيف يتم إعداد الكود في الواجهة الأمامية بشكل صحيح:

const formData = new FormData();
formData.append('ملف', values.image);
formData.append('path', 'image');
formData.append('model', 'item');
formData.append('data', JSON.stringify({ القائمة: القائمة._id.toString(), العنصر: values.item }));

ثم تستخدم Fetch API لإرسال الطلب:

const req = new Request(`/api/v1/upload`, { method: 'POST', body: formData });
fetch(req)
    .then(response => response.json())
    .then(result => console.log(result))
    .catch(error => console.error(error));

أسباب مشكلة req.body كـ null

إذا كانت req.body في الخلفية null بعد إرسال FormData، فقد يعود ذلك إلى عدة أسباب. الأول هو عدم إعداد الخلفية بشكل صحيح لاستقبال بيانات متعددة الأجزاء، والتأكد من استخدام مكتبة مثل Multer للتعامل مع الطلبات.

عند استخدام Multer، يجب عليك التأكد من أنك تقوم بإعداد التخزين بالشكل الملائم، مثل:

const storage = multer.memoryStorage();
const upload = multer({ storage });

ثم يمكنك استخدام upload.single('ملف') في الدالة معالجة الصورة الخاصة بك:

exports.processImage = (req, res, next) => {
    if (!req.file) return next();
    req.file.filename = req.modelController.createFileName(req, req.file) + '.jpeg';
    Sharp(req.file.buffer)
        .toFormat('jpeg')
        .toFile(path.join(`public/image/upload/${req.body.model.toLowerCase()}`, req.file.filename));
    next();
};

التأكد من الرؤوس وخصائص الطلب

من المهم أيضًا التأكد من أن الرؤوس التي يتم إرسالها مع الطلب صحيحة. لا تحتاج إلى تعيين Content-Type يدوياً عند استخدام FormData، حيث سيتم تعيين النوع تلقائيًا. تأكد من مراجعة علامة تبويب الشبكة في المتصفح للتأكد من بيانات الطلب. تحقق من أن نوع المحتوى هو multipart/form-data وأن البيانات الخاصة بك تصل بشكل صحيح.

التأكيد على البيانات المرسلة

إذا كنت تستخدم مكتبة مثل Formik لإدارة النماذج، تأكد من أن البيانات التي ترسلها صحيحة وأن ملف الصورة قد تم تحميله بشكل صحيح. تأكد من أنه يحتوي على قيم صحيحة قبل أن يتوجه الطلب إلى الخلفية. إذا كنت ترى أن قيمة values.image غير صحيحة، فقد يكون هناك خطأ في كيفية معالجة المدخلات في Formik.

استنتاج

في الختام، معالجة مشكلة reactjs - Sending FormData from my front end to backend does not work (req.body in backend is null) تتطلب فحصاً دقيقاً للواجهة الأمامية والخلفية. من الهام التأكد من أن جميع العناصر مرتبطة بشكل صحيح وأن إعدادات Multer تتوافق مع البيانات المرسلة. إذا كنت تستطيع التركيز على هذه النقاط، فمن المرجح أن تحل المشكلة وتتمكن من إرسال البيانات بشكل صحي.