Node.js 图像上传MERN堆栈

我的react和node应用程序位于不同的目录中，我想要的是在react中上载图像，通过axios请求将其发送到后端，在node中接收该图像，然后将其重命名为当前日期和时间，最后将其保存在当前后端目录中，如果成功保存图像，则通过节点后端将其返回到前端，并在屏幕上显示图像

这就是我一直试图达到的目标

表格

<div className="form-group">
                <label htmlFor="exampleFormControlFile1">
                  Example file input
                </label>
                <input
                  type="file"
                  className="form-control-file"
                  id="exampleFormControlFile1"
                  onChange={this.fileSelectedhandler}
                />
              <button onClick = {this.onSubmit}> Upload</button> 
 </div>

后端api

//route for uploading image(optional)
app.post("/upload", (req, res) => {
  if (req.files === null) {
    return res.status(200).json({ msg: "No File Uploaded" });
  }

  const file = req.files.file;
  let ts = Date.now();

  let date_ob = new Date(ts);
  let date = date_ob.getDate();
  let month = date_ob.getMonth() + 1;
  let year = date_ob.getFullYear();

  // prints date & time in YYYY-MM-DD format
  const newFile = `${year} + "-" + ${month} + "-" + ${date}`;

  file.mv(`${__dirname}/uploads/${file.name}`, (err) => {
    if (err) {
      console.log(err);
    } else {
      res.json({
        fileName: file.name,
        filePath: `/uploads/${file.name}`,
        file: req.files.file,
      });
    }
  });
});

此代码的问题是，文件保存到后端目录中，但没有返回到前端。现在，我要做的是将此保存的图像发送回react Fronded并显示它，以响应上述

/upload

post请求

---

任何帮助都将不胜感激。

如果您想在前端获得数据已成功保存的消息。。。。 您可以从后端返回一些响应，在获取响应的过程中，您可以无误地发送消息（Materializecss toast）

---

您面临的具体问题是什么？请更新问题以反映这一点。我已更新我的问题

//route for uploading image(optional)
app.post("/upload", (req, res) => {
  if (req.files === null) {
    return res.status(200).json({ msg: "No File Uploaded" });
  }

  const file = req.files.file;
  let ts = Date.now();

  let date_ob = new Date(ts);
  let date = date_ob.getDate();
  let month = date_ob.getMonth() + 1;
  let year = date_ob.getFullYear();

  // prints date & time in YYYY-MM-DD format
  const newFile = `${year} + "-" + ${month} + "-" + ${date}`;

  file.mv(`${__dirname}/uploads/${file.name}`, (err) => {
    if (err) {
      console.log(err);
    } else {
      res.json({
        fileName: file.name,
        filePath: `/uploads/${file.name}`,
        file: req.files.file,
      });
    }
  });
});

 M.toast({html:"uploaded", classes:"#6a1b9a purple"})