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

السؤال

نشر

السلام عليكم.

أواجه مشكل في إرسال وصف الصورة (Post Method) من طرف العميل (react js) إلى الخادم (node mongo express) و ذلك باستعمال multer

الكود في طرف الخادم

function ShareImageComponent({}) {
  const [image, setImage] = useState(null);
  const [imageTitle, setImageTitle] = useState("");
  const [imageDescription, setImageDescription] = useState("");
  const user = JSON.parse(localStorage.getItem("user"));

  const onInputChange = (e) => {
    if (e.target.files && e.target.files[0]) {
      const file = e.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = (event) => {
          const imageUrl = event.target.result;
          setImage(imageUrl);
        };
        reader.readAsDataURL(file);
      }
    }
  };

  /**
   * Post Image
   */
  const postImage = (e) => {
    e.preventDefault();
    const formData = new FormData();
    formData.append("title", imageTitle);
    formData.append("description", imageDescription);
      if (image) {
        formData.append('photo', 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.data)
        })
        .catch((error) => console.log(error.response.data));
  };
  return (
    <div className="share-container">
      <div className="share-img">
        <img alt="" src={image} />
      </div>
      <form
        encType="multipart/form-data"
        className="share-form-container"
        onSubmit={(e)=>postImage(e)}
      >
        <div className="image-upload">
          <label onChange={onInputChange} htmlFor="formId">
            <input
              name="photo"
              type="file"
              id="formId"
              accept="image/*"
              hidden
            />
            click to upload
          </label>
        </div>
        <input
          type="text"
          className="share-title"
          placeholder="Title ..."
          name="title"
          value={imageTitle}
          onChange={(e) => setImageTitle(e.target.value)}
        />

        <textarea
          type="text"
          className="share-description"
          placeholder="Image Description ..."
          name="description"
          value={imageDescription}
          onChange={(e) => setImageDescription(e.target.value)}
        />

        <button className="submit" type="submit">
          Share
        </button>
      </form>
    </div>
  );
}

Image Model

const ImageSchema = new Schema({
  user: {
    type: mongoose.Schema.Types.ObjectId,
    ref: "user",
  },
  title: {
    type: String,
    required: true
  },
  description: {
    type: String,
    required: true
  },
  photo: {
    type: String,
    required: true
  },
  likes: [
    {
      user: {
        type: Schema.Types.ObjectId
      }
    }
  ],
  comments: [
    {
      user: {
        type: Schema.Types.ObjectId
      },
      text: {
        type: String
      },
      date: {
        type: Date,
        default: Date.now
      }
    }
  ],
  date: {
    type: Date,
    default: Date.now
  }
});

route

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
);

controller

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,
      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");
  }
};

رسالة الخطأ في طرف العميل (console)

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '0')

رسالة الخطأ في طرف الخادم

Error: image validation failed: photo: Path `photo` is required.
    at ValidationError.inspect (C:\Users\saadaoui\Desktop\photaty\server\node_modules\mongoose\lib\error\validation.js:50:26)
    at formatValue (node:internal/util/inspect:806:19)
    at inspect (node:internal/util/inspect:365:10)
    at formatWithOptionsInternal (node:internal/util/inspect:2273:40)
    at formatWithOptions (node:internal/util/inspect:2135:10)
    at console.value (node:internal/console/constructor:340:14)
    at console.log (node:internal/console/constructor:377:61)
    at createImg (C:\Users\saadaoui\Desktop\photaty\server\controllers\ImgCtr.js:29:13)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  errors: {
    photo: ValidatorError: Path `photo` is required.
        at validate (C:\Users\saadaoui\Desktop\photaty\server\node_modules\mongoose\lib\schematype.js:1364:13)
        at SchemaType.doValidate (C:\Users\saadaoui\Desktop\photaty\server\node_modules\mongoose\lib\schematype.js:1348:7)  
        at C:\Users\saadaoui\Desktop\photaty\server\node_modules\mongoose\lib\document.js:2958:18
        at process.processTicksAndRejections (node:internal/process/task_queues:77:11) {
      properties: [Object],
      kind: 'required',
      path: 'photo',
      value: undefined,
      reason: undefined,
      [Symbol(mongoose:validatorError)]: true
    }
  },
  _message: 'image validation failed'
}

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

Recommended Posts

  • 0
نشر

المشكلة الرئيسية هي أن حقل "photo" في مخطط الصورة (ImageSchema) يُعتبر إلزاميًا (required: true)، ولكنه ليس موجودًا في البيانات المرسلة من طرف العميل عندما يتم إرسال الصورة، وذلك هو السبب في ظهور رسالة الخطأ "Path photo is required." في طرف الخادم.

حاول طباعة البيانات المرسلة console.log(formData) لرؤية محتوى البيانات التي تم إرسالها إلى الخادم.

  • 0
نشر
بتاريخ 23 ساعة قال محمود سعداوي2:
const onInputChange = (e) => {
    if (e.target.files && e.target.files[0]) {
      const file = e.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = (event) => {
          const imageUrl = event.target.result;
          setImage(imageUrl);
        };
        reader.readAsDataURL(file);
      }
    }
  };

المشكل في هذا الكود

قمت باستبداله بالكود التالي

const onInputChange = (e) => {
    if (e.target.files && e.target.files[0]) {
      setImage(URL.createObjectURL(e.target.files[0]));
      setAvatar(e.target.files[0]);
    }
  };

 

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

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

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

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

  • إعلانات

  • تابعنا على



×
×
  • أضف...