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

ظهر لي الخطا التالي Cannot read property 'filename' of undefined

علي يعقوب

السؤال

السلام عليكم 

مطلوب مني إنشاء موقع لمشاركة الصور باستخدام React.js و Node.js وقواعد بيانات MongoDB،

بحيث يمكن لأي مستخدم مسجل دخوله رفع الصور سواء كانت PNG أو JPEG

مع عنوانها ووصف خاص بالصورة، وستضاف المعلومات إلى قاعدة البيانات وترفع الصورة إلى الخادم.

وعند اضافة  الكود الخاص برفع الصور تظهر المشكلة التالية Cannot read property 'filename' of undefined

وتظهر في الكنسل xhr.js:177 POST http://localhost:3000/api/posts 500 (Internal Server Error)

ممكن مساعدة؟

pic4.png

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

Recommended Posts

  • 2

يمكننا مساعدتك بشكل أفضل عندما تذكر تفاصيل أكثر مثل كتابة الكود الذي استخدمته لرفع الصور وأيضاً ماهي المكتبة التي تقوم باستخدامها لمعالجة ذلك وأخيراً الجزء الخاص بتحديد الملفات من واجهة المستخدم.

فبما أن رسالة الخطأ هي Cannot read property 'filename' of undefined هذا يعني أنه لا يتم التعرّف على الملف الذي قام المستخدم برفعه ويعود ذلك لعدة أسباب وسأذكر لك بعض النقاط التي قد تساعدك في حل المشكلة:

أولاً: يجب عليك التأكد من أنه يتم تحميل الملف وإرساله مع اسم المتغير الصحيح من واجهة المستخدم وتستطيع ذلك من خلال مراقبة المتغيّرات التي يتم إرسالها بالطلب POST من أدوات تطوير المتصفّح لديك أو من خلال استخدام postman.

ثانياً: يجب عليك التأكد من أن نوع الترميز الخاص بالـ Form الذي تقوم بإرساله من نوع multipart/form-data:

<form method="post" enctype="multipart/form-data" action="/upload">
  ....
</form>

ثالثاً: وبفرض أنك تستخدم المكتبة multer للتعامل مع الملفات في Node JS، يجب عليك التأكد من استخدامها بشكل صحيح كوسيط middleware قبل استقبال القيم إلى المتحكّم الخاص بذلك، وتستطيع الاطلاع عن كيفية تحقيق ذلك من خلال التوثيق لهذه المكتبة أو أي مكتبة تقوم باستخدامها في مشروعك لتحميل الملفات. لأن كل مكتبة لها طريقة تضمين والتعامل معها مختلف.

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

  • 0
بتاريخ 21 ساعات قال Sam Ahw:

يمكننا مساعدتك بشكل أفضل عندما تذكر تفاصيل أكثر مثل كتابة الكود الذي استخدمته لرفع الصور وأيضاً ماهي المكتبة التي تقوم باستخدامها لمعالجة ذلك وأخيراً الجزء الخاص بتحديد الملفات من واجهة المستخدم.

فبما أن رسالة الخطأ هي Cannot read property 'filename' of undefined هذا يعني أنه لا يتم التعرّف على الملف الذي قام المستخدم برفعه ويعود ذلك لعدة أسباب وسأذكر لك بعض النقاط التي قد تساعدك في حل المشكلة:

أولاً: يجب عليك التأكد من أنه يتم تحميل الملف وإرساله مع اسم المتغير الصحيح من واجهة المستخدم وتستطيع ذلك من خلال مراقبة المتغيّرات التي يتم إرسالها بالطلب POST من أدوات تطوير المتصفّح لديك أو من خلال استخدام postman.

ثانياً: يجب عليك التأكد من أن نوع الترميز الخاص بالـ Form الذي تقوم بإرساله من نوع multipart/form-data:


<form method="post" enctype="multipart/form-data" action="/upload">
  ....
</form>

ثالثاً: وبفرض أنك تستخدم المكتبة multer للتعامل مع الملفات في Node JS، يجب عليك التأكد من استخدامها بشكل صحيح كوسيط middleware قبل استقبال القيم إلى المتحكّم الخاص بذلك، وتستطيع الاطلاع عن كيفية تحقيق ذلك من خلال التوثيق لهذه المكتبة أو أي مكتبة تقوم باستخدامها في مشروعك لتحميل الملفات. لأن كل مكتبة لها طريقة تضمين والتعامل معها مختلف.

السلام عليكم 

انا مستخدم هاذا الكود في ال post-controller 

let express = require('express'),

    multer = require('multer'),

    mongoose = require('mongoose'),

    uuidv4=require('uuid')

const DIR = './images/';


const storage = multer.diskStorage({

    destination: (req, file, cb) => {

        cb(null, DIR);

    },

    filename: (req, file, cb) => {

        const fileName = file.originalname.toLowerCase().split(' ').join('-');

         cb(null, uuidv4() + '-' + fileName)
    } 
});


var upload = multer({

    storage: storage,

      limits: {

        fileSize: 1024 * 1024 * 5

    },

    fileFilter: (req, file, cb) => {

        if (file.mimetype == "image/png" || file.mimetype == "image/jpg" || file.mimetype == "image/jpeg") {

            cb(null, true);

        } else {

            cb(null, false);

            return cb(new Error('Only .png, .jpg and .jpeg format allowed!'));
        }
    }

});

// انشاء الصورة

exports.create = (upload.single('image'),(req, res, next) => {

    const url = req.protocol + '://' + req.get('host')

    let model = new Post({

        title: req.body.title,

        content: req.body.content,

        profileImg: `${req.protocol}://${req.get('host')}/images/${req.file.filename}`,

        author: req.user.id
    });

    model.save()

        .then(result => {

            res.status(201).json({

                message: "User registered successfully!",

                userCreated: {

                    _id: result._id,

                    profileImg: result.profileImg

                }
            })
        })

        .catch(err => {

            console.log(err),

                res.status(500).json({

                    error: err

                });
        })
});

وايضا داخل ال craet-post-controller

import React from 'react';

import axios from 'axios';

import "bootstrap/dist/css/bootstrap.min.css";

//import { Button } from 'react-bootstrap';

const createError = require('http-errors');

class CreatePost extends React.Component {

    constructor(props) {

        super(props);

        if (!localStorage.getItem('token')) {

            this.props.history.push('/Login');//move to home page

        }

        this.onChangeTitle = this.onChangeTitle.bind(this);

        this.onChangeContent = this.onChangeContent.bind(this);

        this.onSubmit = this.onSubmit.bind(this);

        this.renderError = this.renderError.bind(this);
        this.state = {

            title: '',

            content: '',

            profileImg: '',

            error: ''
        };

    }

    onChangeTitle(e) {
        this.setState({

            title: e.target.value,

            error: ''

        });

    }
    onChangeContent(e) {

        this.setState({

            content: e.target.value,

            error: ''

        });
    }

    onSubmit(e) {

        e.preventDefault();

        const formData = new FormData()

        formData.append('profileImg', this.state.profileImg)

        let data = {

            title: this.state.title,

            content: this.state.content,

        };

        axios.post('/api/posts', data)

            .then(res => {

                //alert(res.data.token);

                this.props.history.push('/');//move to home page

            })
            .catch(err => {

                if (err.title === ' ' && err.content === ' ') throw createError(404);

                //alert(err.response.data.message)

                this.setState({

                    error: err.response.data.message

               });

            })
    }
    renderError() {
        return this.state.error ? (<blockquote>{this.state.error}</blockquote>) : "";

    }

    render() {

        return (

            <div className="container">

                <div className="row">

                    <h4 className="mb-5"> انشاء صورة</h4>

                    {this.renderError()}

                    <form onSubmit={this.onSubmit} enctype="multipart/form-data">

                        <h3 className="mb-3"> العنوان </h3>

                        <div className="form-group mb-5">

                            <input className="form-input" type="text" value={this.state.title} onChange={this.onChangeTitle} placeholder="اضف عنوان للصورة " />

                        </div>

                        <h3 className="mb-3"> اضافة صورة </h3>

                        <div className="form-group mb-5">

                            <input type="file" className="form-input" name="image" defaultValue={this.state.profileImg} />

                        </div>

                        <h3 className="mb-3"> المحتوى </h3>

                        <div className="form-group mb-5">

                            <textarea className="form-input" value={this.state.content} onChange={this.onChangeContent} placeholder="اضف وصف للصورة "></textarea>

                        </div>

                        <div className="form-group">

                            <button className="btn button-primary button-outline" type="submit">ارسال</button>

                        </div>

                    </form>

                </div>

            </div>
        );
    }
}

export default CreatePost;


وايضا داخل ال post-model

const mongoose=require("mongoose");

const Schema=mongoose.Schema;

const CommentSchema=new Schema({
    content:{
        type:String,
        required:true
    },
    author:{
        type:Schema.Types.ObjectId,

        ref:'User'
    },
    create_at:{
        type:Date,

       default:Date.now  
    },

});

const PostSchema=new Schema({

    title:{

        type:String,

        required:true

    },

    profileImg: {

        type: String

    },

    content:{

        type:String,       

        required:true

    },
    author:{

        type:Schema.Types.ObjectId,

        ref:'User'
    },

    comments:[      

        CommentSchema,

    ],

    create_at:{

        type:Date,

       default:Date.now     

    }, 

});
const Post=mongoose.model('Post',PostSchema);

module.exports=Post;

 

مش عارف ليه بيظهر نفس الخطا وحاولت ادور ع حل لكن من دون فاىدة؟

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

  • 0

على الأغلب طريقة إرسال FormData خاطئة عند أرسال صورة عن طريق ال Formdata عليك تحديد ContantTypr ب 'multipart/form-data'  الرجاء محاول إرسال المعلومات بالطريقة التالية بدلا مما سبق 

var formData = new FormData();
formData.append('profileImg', this.state.profileImg, this.state.title)
console.log(formData);
axios({
  method: "post",
  url: "/api/posts",
  data: formData,
  headers: { "Content-Type": "multipart/form-data" },
})
  .then(function (response) {
    //handle success
    console.log(response);
  })
  .catch(function (response) {
    //handle error
    console.log(response);
  });

 

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

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

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

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

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   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.

  • إعلانات

  • تابعنا على



×
×
  • أضف...