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

Question

我正在尝试从响应 nodejs 的 POST 请求中发送图像。但是我的后端没有收到文件并且 req.file 是未定义的。当我用邮递员测试服务器图像上传代码时，一切正常，所以我怀疑前端有问题。有人知道出了什么问题吗？ 这是我的代码：

Image_Upload.js（提交图片函数，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 实际上是一个express middleware，它必须接受3 个参数：分别是请求、响应和下一个。 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
});