无法从React上传（图像+用户数据）到node.js后端

Question

当我单击注册按钮时，会调用 REGISTER_USER 函数，然后它会创建一个包含所有数据的表单 obj 并将其发布到后端。我不知道为什么它给出 500 错误，cors 错误甚至很难我在我的 app.js （node.js 文件）中添加了 cors 请帮我解决这个问题！预先感谢...

错误

这是我的后端代码 这样就实现了上传文件和用户数据到数据库

const imageStorage = multer.diskStorage({
  destination: "./assets/images/Customers",
  filename: (req, file, cb) => {
    cb(
      null,
      file.originalname.split(".")[0] +
        "-" +
        Date.now() +
        "." +
        file.originalname.split(".")[1]
    );
  },
});

const upload_image = multer({
  storage: imageStorage,
  limits: {
    fileSize: 10000000,
  },
  fileFilter(req, file, cb) {
    if (!file.originalname.match(/\.(png|jpg)$/)) {
      return cb(new Error("Only Png / Jpg format is accepted"));
    }
    cb(undefined, true);
  },
});
router.post("/create-user", upload_image.single("image") , async (req, res) => {
  try{
      console.log(req.body)
      console.log(req.file.filename)
      let isPresent = await User.findOne({Name : req.body.Email.toLowerCase()})
      if(isPresent !== null){
          return res.status(400).json({ success : false , message : "Customer already present in the data base!"})
      }else{
          const salt = await bcrypt.genSalt(10);
          const hashedPassword = await bcrypt.hash(req.body.Password , salt)
          let data = {...req.body , Name : req.body.Name.toLowerCase() , Password : hashedPassword , Email : req.body.Email.toLowerCase() , ProfilePic : req.file.filename};
          console.log(data)
          let Created_Customer = await User.create(data)
          return res.status(200).json({success : true , message : "Successfully created the customer!" , Customer : Created_Customer});
      }
    }catch(err){
        return res.status(500).json({success : false , message : err});
    }
});

这是我的前端表单代码

发布数据的函数

const [adminData , setAdminData]  = useState({
      Name : "" ,
      Email : "",
      Password : "",
      Role : "admin",
      file : ""
    })
    const REGISTER_USER = async (e) =>{
      e.preventDefault()
      const formData = new FormData()
      formData.append("Name" , adminData.Name)
      formData.append("Email" , adminData.Email)
      formData.append("Role" , adminData.Role)
      formData.append("Password" , adminData.Password)
      formData.append("image" , adminData.file)
      const res = await fetch("http://localhost:5000/api/create-user" , {
        method : "POST",
        body : formData
      })
      console.log(res)
    }

形式

<form onSubmit={REGISTER_USER}> 
     
        <div>
          <span>Name</span>
          <span>
            <input type="text"  name ="Name" value ={adminData.Name} onChange={(e) => setAdminData({...adminData , [e.target.name] : e.target.value})}/>
            <PersonOutlineRoundedIcon/>
          </span>
        </div>
        <div>
          <span>Email</span>
          <span>
            <input type="text"  name ="Email" value ={adminData.Email} onChange={(e) => setAdminData({...adminData , [e.target.name] : e.target.value})}/>
            <PersonOutlineRoundedIcon/>
          </span>
        </div>
        <div >
          <span>Password</span>
          <span >
            <input type="password"  name ="Password" value ={adminData.Password} onChange={(e) => setAdminData({...adminData , [e.target.name] : e.target.value})}/>
            <VisibilityOutlinedIcon />
          </span>
        </div>
        <span>
            <input type="file" name ="file" value ={adminData.file} onChange={(e) => setAdminData({...adminData , [e.target.name] : e.target.value})}/>
        </span>
        <button type="submit">
          <span>Register</span> 
          <ArrowForwardOutlinedIcon/>
        </button>
      </form>

后端以这种格式接收数据

Answer 1

最好将图像和其他字段上传到不同的路由处理程序上，这样如果用户注册成功，则上传图像，在后端分离处理程序并将其他数据作为字符串 json 附加在前面，而图像作为多部分表单数据，使用 {new formData} Api，仅在用户注册成功时附加它，这样如果用户注册不成功，则图像不会上传，让图像请求成为带有用户 ID 的补丁请求