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

【问题标题】：Sending image to backend using multar post and axios使用 multar post 和 axios 将图像发送到后端
【发布时间】：2021-03-24 23:10:50
【问题描述】：

主要问题是当我上传数据时，在向 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);
  });
});

同样，当我 console.log 记录 newBlogPost 时，也没有图像。 req.file 应该包含 img，但它是未定义的。我也尝试过使用 from-data，但没有成功。

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

【问题讨论】：

标签： javascript node.js reactjs axios multer

【解决方案1】：

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

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

您还可以在 formData 中附加其他数据。参考这个网址， https://developer.mozilla.org/en-US/docs/Web/API/FormData/append

【讨论】：