Блог

Основная проблема заключается в том, что когда я загружаю данные, после создания полезной нагрузки в Axios. Загружается только основная часть. Часть изображения не загружается.

 submit = (event) => {
event.preventDefault();

const payload = {
  img: this.state.img,
  body: this.state.body,
};
axios({
  url: "/api/save",
  method: "POST",
  data: payload,
})
  .then((response) => {
    console.log("data has been sent to the server RESPONSE: ", response);
    this.resetUserInput();
    this.getBlogPost();
  })
  .catch((err) => {
    console.log("Data is not posted: and payload is :", payload);
  });
 

Это код для моей кнопки отправки. И это вызывается в multer, и там я пытаюсь загрузить изображение. Здесь полезная нагрузка показывает изображение при выполнении console.log(), но после передачи в axios и multer получаемый нами ответ не имеет img. img — это просто пустой объект в ответе.

 const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, "../uploads");
  },
  filename: function (req, file, cb) {
    cb(null, file.fieldname   "-"   Date.now());
  },
});

const upload = multer({ storage: storage });

router.post("/save", upload.single("img"), (req, res) => {
  const data = {
    body: req.body.body,
    img: {
      data: req.file,
      contentType: "image/png",
    },
  };

  const newBlogPost = new BlogPost(data);
  console.log(newBlogPost);
  newBlogPost.save((err, val) => {
    if (err) {
      res.status(500).json({ msg: "Sorry, The data couldn't be saved" });
      console.log("Reached the save errors!");
      return;
    }
    // console.log("printing the req here: ", req);
    res.json(val);
  });
});
 

Здесь также, когда я утешаю.войдите в newBlogPost, изображения нет. запрос.файл должен содержать img, но он не определен. Я также пробовал использовать from-data, но не сработало.

Здесь есть кто-нибудь, кто может помочь!

Вы не можете просто поместить файл в тело. Вам нужно использовать form-data с axios:

 const data = new FormData();
data.append("img", fileInput.files[0], "filepath.jpg");
 

Также вы можете добавить другие данные в FormData.
Обратитесь к этому URL-адресу,
https://developer.mozilla.org/en-US/docs/Web/API/FormData/append