从ReactJS上传到时的NodeJS是Req.file未定义

Question

我试图在POST REQ发送图像从反应的NodeJS。但是我的后端没有收到该文件，并req.file是不确定的。当我和邮递员测试服务器的图片上传代码，一切工作正常，所以我怀疑什么是错的前端。任何人都知道什么是错的？这里是我的代码：

Image_Upload.js（提交图像FUNC，的fileList [0]是一个图像）：

 onSubmitImage = e => {
    const config = {
      headers: {
        "content-type": "multipart/form-data"
      }
    };
    const formData = new FormData();
    formData.append(
      "image",
      this.state.fileList[0]
    );
    axios
      .post("/api/profile/img_upload", formData)
      .then(res => console.log("Response: " + res))
      .catch(err => console.log(err.response.data));
  };

profile.js（接收图像端点）：

router.post(
  "/img_upload",
  passport.authenticate("jwt", { session: false }),
  (req, res) => {
    upload(req, res, err => {
      console.log(req);
      if (err) {
        res.status(400).json({ Error: err });
      } else {
        if (req.file == undefined) {
          res.status(404).json({ error: "no file selected" });
        } else {
          res.json({ fileLoc: req.file.location });
        }
      }
    });
  }
);

img_upload.js（多重峰设置）：

const upload = multer({
  storage: storage,
  limits: { fileSize: 1000000 },
  fileFilter: function(req, file, cb) {
    checkFileType(file, cb);
  }
}).single("image");

任何帮助表示赞赏

编辑：我注意到，当接收的NodeJS从前端的REQ，它是在req.body而不是req.file。所以我肯定这个问题是在反应。我怎样才能应对其发送的req.file而不是req.body？ Image request from Reacdt Front-end to Nodejs backend

Answer 1

您定义upload实际上是必须采取3个参数的express middleware：分别请求，响应和下一。 next()调用情况下，后续的中间件没有错误或next(error)其他。我强烈建议检查the answers to this question得到一个更好的主意。

你在这里做的是，你调用一个中间件，如果它是一个方法。要首先解决这个问题，配置multer

const multer  = require('multer');
const upload = multer({
  storage: 'path/here/',
  limits: { fileSize: 1000000 },
  fileFilter: function(req, file, cb) {
    checkFileType(file, cb);
  }
});

然后

router.post("/img_upload",
  passport.authenticate("jwt", { session: false }),
  upload.single('image'),
  (req, res) => {
  // Your code here
});