首页 > 解决方案 > 未找到边界 为什么?

问题描述

这是我的注册页面,我在这里处理多部分表单...

import React, { useEffect, useState } from "react";
import { Next } from "react-bootstrap/esm/PageItem";
import { Link } from "react-router-dom";
import CheckedCompany from "./includes/CheckedCompany";
import axios from "axios";
export default function Sigin() {
  const [companyType, setCompanyType] = useState(false);
  const clickHandlerCompanyType = (event) => {
    setCompanyType(!companyType);
    console.log("Im here");
  };
  const [checked, setchecked] = useState(false);

  const checkedPerson = (event) => {
    setchecked(!checked);
  };
  const [name, setName] = useState("");
  const [surname, setSurname] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [image, setImage] = useState("");
  const submitHandler = (e) => {
    axios({
      url: "http://localhost:5000/user/register",
      method: "POST",
      data: {
        name,
        surname,
        email,
        password,
        userType: checked ? "2" : "1",
        image,
      },

      headers: {
        "Content-Type": "multipart/form-data",
      },

      withCredentials: true,
      crossDomain: true,
    })
      .then((res) => console.log(res))
      .catch((err) => console.log(err));
  };
  return (
    <div class="container pt-5  mb-2">
      <div class="row">
        <div class=" container col-md-12 ">
          <div class=" container card my-1">
            <h5 class="card-title text-center">Yeni Kayıt</h5>
            <div class="card-body">
              <div className="row ">
                <div className="col-6 ps-5">
                  <div class="mb-3 form-check">
                    {" "}
                    <label class="form-check-label" for="exampleCheck2">
                      Bireysel
                    </label>
                    <input
                      checked={!checked}
                      onChange={checkedPerson}
                      type="radio"
                      class="form-check-input"
                      name="flexRadioDefault"
                    />
                  </div>
                </div>
                <div className="col-6 ps-5">
                  <div class="mb-3 form-check">
                    <input
                      onChange={checkedPerson}
                      type="radio"
                      class="form-check-input"
                      name="flexRadioDefault"
                    ></input>
                    <label class="form-check-label" for="exampleCheck2">
                      İşletme
                    </label>
                  </div>
                </div>
              </div>
              <form onSubmit={submitHandler}>
                <div class="mb-3">
                  <label for="formFile" class="form-label">
                    Resim
                  </label>
                  <input
                    class="form-control"
                    type="file"
                    name="image"
                    onChange={(e) => {
                      setImage(e.target.files[0]);
                      console.log(e.target.files[0]);
                    }}
                  />
                </div>
                <div class="mb-3">
                  <label for="name" class="form-label">
                    Adınız
                  </label>
                  <input
                    type="text"
                    class="form-control"
                    name="name"
                    onChange={(e) => setName(e.target.value)}
                  ></input>
                </div>
                <div class="mb-3">
                  <label for="surname" class="form-label">
                    Soyadınız
                  </label>
                  <input
                    type="text"
                    class="form-control"
                    name="surname"
                    onChange={(e) => setSurname(e.target.value)}
                  ></input>
                </div>
                <div class="mb-3">
                  <label for="email" class="form-label">
                    E-posta adresiniz
                  </label>
                  <input
                    type="email"
                    class="form-control"
                    name="email"
                    onChange={(e) => setEmail(e.target.value)}
                  ></input>
                </div>
                <div className="mb-3">
                  {" "}
                  <label for="password" class="form-label">
                    Şifre
                  </label>
                  <input
                    type="password"
                    class="form-control"
                    name="password"
                    aria-describedby="passwordHelp"
                    onChange={(e) => setPassword(e.target.value)}
                  />
                </div>

                {checked
                  ? CheckedCompany({
                      companyType,
                      clickHandlerCompanyType,
                      setCompanyType,
                    })
                  : null}
                <div class="mb-3">
                  <div id="passwordHelp" class="form-text">
                    <a href="#">şifremi unuttum</a>
                  </div>
                </div>
                <div class="mb-3 form-check">
                  <input
                    type="checkbox"
                    class="form-check-input"
                    id="exampleCheck1"
                  ></input>
                  <label class="form-check-label" for="exampleCheck1">
                    <a href="#"> Bireysel Üyelik Sözleşmesini ve Ekleri'ni</a>{" "}
                    Kabul ediyorum
                  </label>
                </div>
                <div class="mb-3 form-check">
                  <input
                    type="checkbox"
                    class="form-check-input"
                    id="exampleCheck2"
                  ></input>
                  <label class="form-check-label" for="exampleCheck2">
                    İletişim bilgilerime kampanya, tanıtım ve reklam içerikli
                    ticari elektronik ileti gönderilmesine, bu amaçla kişisel
                    verilerimin işlenmesine ve tedarikçilerinizle paylaşılmasına
                    izin veriyorum
                  </label>
                </div>

                <p class="card-text text-center">
                  <button type="submit" class="btn btn-primary">
                    Üye Ol
                  </button>
                </p>
              </form>
            </div>
          </div>
          <div class="card">
            <div class="card-body">
              Bu sayfadaki bilgiler 4teker.com üyeliği için alınmaktadır.
              Kişisel verilerin korunması hakkında detaylı bilgiye{" "}
              <a href="#">buradan</a> ulaşabilirsiniz.
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

我正在将带有 axios 的表单发送到 api

const express = require("express");
const app = express();
const cors = require("cors");
const cookieParser = require("cookie-parser");
const session = require("express-session");
const mongoDbStore = require("connect-mongodb-session")(session);
const bodyParser = require("body-parser");
const mongoose = require("mongoose");

require("dotenv").config();
const port = process.env.PORT;
//Routes
const postRoutes = require("./routes/post.route");
const userRoutes = require("./routes/user.route");
//Middlewares
const store = new mongoDbStore({
  uri: process.env.ATLAS_URI,
  collection: "Sessions",
});
const multer = require("multer");
const path = require("path");
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, "./public/img/");
  },
  filename: function (req, file, cb) {
    cb(
      null,
      file.fieldname + "-" + Date.now() + path.extname(file.originalname)
    );
  },
});
app.use(express.static("public"));
app.use(multer({ storage }).single("image"));

app.use(
  session({
    secret: "keyboard cat",
    resave: false,
    saveUninitialized: false,
    cookie: {
      maxAge: 36000000,
    },
    store,
  })
);

app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());

app.use(cors({ credentials: true, origin: "http://localhost:3000" }));
app.use(express.json());
//DB
const uri = process.env.ATLAS_URI;
mongoose.connect(uri, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
  useCreateIndex: true,
});
const connection = mongoose.connection;
connection.once("open", () => {
  console.log("Db is connected");
});

app.use("/user", userRoutes);
app.use("/post", postRoutes);

app.listen(port, () => {
  console.log("Port 5000 is listening...");
});



我的意思是不应该有任何问题,但是有:d你们能帮帮我吗?顺便说一句,错误在下面。

错误:Multipart:在 Multipart (C:\ Busboy.parseHeaders (C:\Users\musa2\OneDrive\Masaüstü\calisma-Workinon\ 的用户\musa2\OneDrive\Masaüstü\calisma-Workinon\backend\node_modules\busboy\lib\types\multipart.js:26:12) backend\node_modules\busboy\lib\main.js:71:22) 在新 Busboy (C:\Users\musa2\OneDrive\Masaüstü\calisma-Workinon\backend\node_modules\busboy\lib\main.js:22:10 ) 在 multerMiddleware (C:\Users\musa2\OneDrive\Masaüstü\calisma-Workinon\backend\node_modules\multer\lib\make-middleware.js:33:16) 在 Layer.handle [as handle_request] (C:\Users \musa2\OneDrive\Masaüstü\calisma-Workinon\backend\node_modules\express\lib\router\layer.js:95:5)
在 trim_prefix (C:\Users\musa2\OneDrive\Masaüstü\calisma-Workinon\backend\node_modules\express\lib\router\index.js:317:13) 在 C:\Users\musa2\OneDrive\Masaüstü\calisma- Workinon\backend\node_modules\express\lib\router\index.js:284:7 在 Function.process_params (C:\Users\musa2\OneDrive\Masaüstü\calisma-Workinon\backend\node_modules\express\lib\router\index .js:335:12) 在下一个 (C:\Users\musa2\OneDrive\Masaüstü\calisma-Workinon\backend\node_modules\express\lib\router\index.js:275:10) 在 serveStatic (C:\Users \musa2\OneDrive\Masaüstü\calisma-Workinon\backend\node_modules\serve-static\index.js:75:16) 在 Layer.handle [as handle_request] (C:\Users\musa2\OneDrive\Masaüstü\calisma-Workinon \backend\node_modules\express\lib\router\layer.js:95:5)
在 trim_prefix (C:\Users\musa2\OneDrive\Masaüstü\calisma-Workinon\backend\node_modules\express\lib\router\index.js:317:13) 在 C:\Users\musa2\OneDrive\Masaüstü\calisma- Workinon\backend\node_modules\express\lib\router\index.js:284:7 在 Function.process_params (C:\Users\musa2\OneDrive\Masaüstü\calisma-Workinon\backend\node_modules\express\lib\router\index .js:335:12) 在下一个 (C:\Users\musa2\OneDrive\Masaüstü\calisma-Workinon\backend\node_modules\express\lib\router\index.js:275:10)

标签: node.jsreactjsapiexpress

解决方案


推荐阅读