TypeError：无法读取未定义的属性（读取“数据”） - 反应

Question

我正在尝试使用 multer 在 React 应用程序中插入一个文件。使用邮递员，我可以插入数据字段和文件。但是当我尝试从前端插入它时出现此错误。谁能指出一个解决方案。

这里是 route.js

const router = require("express").Router();
const ProjectRegistrations = require("../Model/ProjectRegistration.model.js");
const upload = require("../Utils/multer.js");
const cloudinary = require("../Utils/cloudinary.js");

// 1. Project Registration

router.post(
  "/project-registration",
  upload.single("srsDocument"),
  async (req, res) => {
    try {
      const {
        projectName,
        projectClient,
        startDate,
        endDate,
        rate,
        teamName,
        leaderName,
        figmaLink,
        description,
      } = req.body;
      const Project = await ProjectRegistrations.findOne({ projectName });
      console.log(req.body);
      let rateSign = "$"; // To Concatenate with rate

      const result = await cloudinary.uploader.upload(req.file.path, {
        public_id: req.file.originalname,
        resource_type: "auto",
      });

      if (Project)
        return res.status(400).json({ msg: "This Project already exists." });

      const newProject = new ProjectRegistrations({
        projectName,
        projectClient,
        startDate,
        endDate,
        rate: rate.concat(rateSign), // Concatenating rate with "$"
        teamName,
        leaderName,
        figmaLink,
        description,
        srsDocument: result.url,
        cloudinaryId: result.public_id,
      });
      await newProject.save();
      res.send({ msg: "Project Registered successfully" });
      console.log("project saved to db");
    } catch (err) {
      return res.status(500).send({ msg: err.message });
    }
  }
);

前端文件 下面是用户界面代码。我已经删除了多余的代码

import React, { useEffect, useState } from "react";
import axios from "axios";
const Projects = () => {
  const [project, setProject] = useState({
    projectName: "",
    projectClient: "",
    startDate: "",
    endDate: "",
    rate: "",
    teamName: "",
    leaderName: "",
    figmaLink: "",
    description: "",
    srsDocument: "",
  });

  const onChangeInput = (e) => {
    const { name, value } = e.target;
    setProject({ ...project, [name]: value });
  };
  const addProject = async (e) => {
    e.preventDefault();

    var formData = new FormData();
    for (let key = 0; key < project.srsDocument.length; key++) {
      formData.append("srsDocument", project.srsDocument[key]);
    }

    try {
      axios
        .post("http://localhost:2000/api/project-registration", {
          project,
          // srsDocument,
        })
        .then((res) => {
          console.log(res.data);
        });
      alert("Project Added");

      // window.location.reload();

      console.log(project);
      console.log(result.response.data);
    } catch (error) {
      console.error(error.response.data);
      console.log("srs " + srsDocument);
      alert(err.response.data.msg);
    }
  };


render(
<form onSubmit={addProject}>
                <div className="row">
                  <div className="col-sm-6">
                    <div className="form-group">
                      <label>Project Name</label>
                      <input
                        className="form-control"
                        type="text"
                        name="projectName"
                        value={project.projectName}
                        onChange={onChangeInput}
                      />
                    </div>
                  </div>
                  <div className="col-sm-6">
                    <div className="form-group">
                      <label>Client</label>
                      <input
                        className="form-control"
                        type="text"
                        value={project.projectClient}
                        name="projectClient"
                        onChange={onChangeInput}
                      />
                    </div>
                  </div>
                </div>
                <div className="row">
                  <div className="col-sm-6">
                    <div className="form-group">
                      <label>Start Date</label>
                      <div>
                        <input
                          className="form-control "
                          type="date"
                          value={project.startDate}
                          name="startDate"
                          onChange={onChangeInput}
                        />
                      </div>
                    </div>
                  </div>
                  
                </div>
                
               </div>
                <div className="form-group">
                  <label>Upload SRS Document</label>
                  <input
                    className="form-control"
                    type="file"
                    value={project.srsDocument}
                    name="srsDocument"
                    onChange={onChangeInput}
                    multiple={false}
                    // onChange={(e) => setSrsDocument(e.target.files[0])}
                  />
                </div>
                <div className="submit-section">
                  <button className="btn btn-primary submit-btn">Submit</button>
                </div>
              </form>
)

我检查了以前的问题，但我无法解决我的问题

Answer 1

尝试像这样更改您的axios 电话：

axios.post('http://localhost:2000/api/project-registration', project).then(...);