Question

我想上传包含其他表单数据的文件。但是当我使用不同的路径（如router.post（/ api / upload））上传文件时，它可以工作，但我想将文件以及其他形式的数据一起上传至route.post（'/ api / complaints'）等路径，但是当我使用route.post（'/ api / complaints'）时，“ req.file”是未定义的，但是当我使用router.post（/ api / upload）时，它会被上传。请帮助。

这是更重要的配置

const upload = multer({
  limits: {
    fileSize: 10000000
  },
  fileFilter(req, file, cb) {
    if (!file.originalname.match(/\.(jpg|jpeg|png)$/)) {
      return cb(new Error("File must be .jpg | .jpeg | .png"));
    }
    cb(undefined, true);
  }
});

这是上传文件的路径。

router.post(
  "/upload",
  upload.single("complaint"),
  async (req, res) => {
    // req.file.buffer;
    res.status(200).send("file uploaded successfully." + req.file.buffer);
  },
  (error, req, res, next) => {
    res.status(400).send({ error: error.message });
  }
);

这是发布所有表单数据的途径。问题在这里。这里req.file是未定义的。

router.post(
  "/",
  authComplainer,
  upload.single("complaint"),
  async (req, res) => {

    const category = await Category.findById(req.body.categoryId);

    if (!category) return res.status(400).send("Invalid category.");

    const assignee = await Assignee.findOne({
      responsibility: category
    });
    if (!assignee) return res.status(400).send("Invalid Assignee.");

    const complainer = await Complainer.findById(req.complainer._id);
    if (!complainer) return res.status(400).send("Invalid Complainer.");

    let complaint = new Complaint({
      category: {
        _id: category._id
      },
      complainer: {
        _id: complainer._id
      },
      assignedTo: {
        _id: assignee._id
      },
      geolocation: req.body.geolocation ? req.body.geolocation : "",
      details: req.body.details,
      title: req.body.title,
      location: req.body.location,
      image: req.file ? req.file.buffer : ""
    });

    await complaint.save();
    res.send(complaint);

这是我的reactjs代码

 handleFileChange = e => {
    // if (this.checkMimeType(e)) {
    this.setState({ selectedFile: e.target.files[0] });
}

doSubmit = async () => {
    this.setState({ isDialogOpen: false });
    this.setState({ isLoading: true });

    const data = new FormData();
    data.append(
      "complaint",
      this.state.selectedFile,
      this.state.selectedFile.name
    );

    const newState = { ...this.state.data, data };
    console.log(newState);

    const { data: result } = await saveComplaint(this.state.data);
    this.setState({ isLoading: false });

    console.log(result);
    toast.success("Complaint is successfully registered.");
    // this.props.history.replace("/complainer");
   };

我想将文件以及其他表单数据（例如输入文字）等上载，但无法正常工作。请帮忙。主要问题在于 React.js 代码。从React应用发送时，req.file是未定义的。当我从Postmon测试它时。在两种情况下都可以使用

Answer 1

因此，如果您已经确定“ React.js中存在问题”，请改为在React的github中提交问题！

用文件输入和其他输入替代表单

1 个答案: