Question

我正在尝试在POST请求中发送图像以响应nodejs。但是我的后端没有收到文件，并且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（multer设置）：

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

感谢您的帮助

编辑：我注意到，当nodejs从前端接收请求时，它位于req.body中，而不是req.file中。所以我肯定这个问题是在反应。我如何反应将其作为req.file而不是req.body发送？ Image request from Reacdt Front-end to Nodejs backend

Answer 1

您定义的

upload实际上是一个express middleware，必须带有3个参数：分别为request，response和next。如果没有错误，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
});

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

1 个答案: