Node.js net:：在MERN应用程序中将文件发布到远程端口时，错误名称未解决和其他问题

我正在尝试将文件发布到我的react应用程序的mongo数据库。下面我将附上路由、服务器、API调用、文件上传组件和mongo模式相关部分的代码。当我上传文件时，出现以下错误：

• xhr.js:178篇文章http://locahost:5000/api/uploads/add net:：错误\u名称\u未\u解析

等等http://localhost:5000/api/uploads，我得到这个错误：

• 得到http://localhost:5000/api/%PUBLIC_URL%/manifest.json 400（错误请求）

有人能看出我做错了什么吗？下面的代码>>>

路线：

const router = require("express").Router();
let Upload = require("../models/Upload");


router.route("/").get((req, res) => {
  Upload.find()
    .then((uploads) => res.json(uploads))
    .catch((err) => res.status(400).json("Error: " + err));
});

router.route("/add").post((req, res) => {
  const file = req.files.file;
  const filename = req.files.file.name;

  const newUpload = new Upload({
    file,
    filename,
  });

  newUpload
    .save()
    .then(() =>
      res.json(`New Upload: ${fileame} has been added to the database!`)
    )
    .catch((err) => res.status(400).json("Error: " + err));
});

module.exports = router;

服务器：

   app.use(cors());
    app.use(fileUpload());
    app.use(methodOverride("_method"));
    app.use(express.json());
    app.use(express.urlencoded({ extended: true }));
    
    
    const dbOptions = {
      useNewUrlParser: true,
      useFindAndModify: false,
      useCreateIndex: true,
      useUnifiedTopology: true,
    };


mongoose
  .connect(
    process.env.MONGODB_URI || "mongodb://localhost:27017/qia",
    dbOptions
  )
  .then(() => console.log("MongoDB Connected!"))
  .catch((err) => console.error(err));

    const proposalsRouter = require("./routes/proposals.routes");
    const uploadsRouter = require("./routes/uploads.routes");
    
    app.use("/api/proposals", proposalsRouter);
    app.use("/api/uploads", uploadsRouter);
    
    app.get("*", function (req, res) {
      res.sendFile(path.join(__dirname, "../client/public/index.html"));
    });

API调用：

addNewUpload: (upload) => {
    return axios.post("http://localhost:5000/api/uploads/add", upload);
  }

组成部分：

function FileUpload() {
  const [file, setFile] = useState("");
  const [filename, setFilename] = useState("Choose File");

  const onChange = (e) => {
    setFile(e.target.files[0]);
    setFilename(e.target.files[0].name);
  };

  const onSubmit = async (e) => {
    e.preventDefault();
    API.addNewUpload({ file: file, filename: filename });
    console.log(file, filename);
  };
return (
    <form onSubmit={onSubmit}>
      <div className="formContainer">
        <input
          type="file"
          className="fileInput"
          id="fileInput"
          onChange={onChange}
        />
        <label for="fileInput">{filename}</label>
      </div>
      <input type="submit" value="Upload" classname="uploadButton"></input>
    </form>
  );
}

const mongoose = require("mongoose");
const Schema = mongoose.Schema;

const UploadSchema = new Schema({
  file: {
    type: Object,
  },
  filename: {
    type: String,
  },
});

const Upload = mongoose.model("Upload", UploadSchema);

module.exports = Upload;