使用 multar post 和 axios 将图像发送到后端

Question

The main problem is that when I am uploading the data, after making a payload to Axios. Only the body part is getting uploaded. The image part is not getting uploaded.

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

This is code for my submit button. And this is called to multer and there I am trying to upload the image. Here payload is showing the image while doing console.log(), but after passing to axios and multer, The response that we are receiving doesn't have the img. img is just an empty object in the response.

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

Here also, when I console.log the newBlogPost, there is no image. req.file should be containing img, but it is undefined. I also tried it using from-data, but didn't work.

Anyone here who can help!

Answer 1

You can't just put a file in the body. You need to use form-data w/ axios:

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

Also you can append other data in formData. Refer to this url, https://developer.mozilla.org/en-US/docs/Web/API/FormData/append