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

Question

主要问题是，当我上传数据时，在对 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 在响应中只是一个空的 object 。

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

在这里，当我 console.log 新博客帖子时，也没有图像。 req.file 应该包含 img，但它是未定义的。 我也尝试使用 from-data，但没有奏效。

这里的任何人都可以提供帮助！

Answer 1

您不能只将文件放在正文中。 您需要使用带有 axios 的表单数据：

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

您也可以在 formData 中使用 append 其他数据。 参考这个 url, https://developer.mozilla.org/en-US/docs/Web/API/FormData/append