我遇到了一个问题。我通过点击按钮打开对话框来实现加载化身的过程。选择文件后，会将其发送到后端。处理程序已经写在上面了，它们正在工作。这段代码打开一个窗口，提交一个表单，但是。。。什么也没发生。我甚至不知道如何检查请求是否发送到服务器，因为提交表单会重新加载页面。
客户部分

import React, { useRef } from "react";
import { logout } from "../../Redux/Auth/Auth-operations";
import { useDispatch } from "react-redux";
import { useSelector } from "react-redux";
import { getNickname } from "../../Redux/selectors";
import styles from "./LogOut.module.css";
import anonym from "../../img/anonymGit.png";

export default function LogOut({ id }) {
  const nickName = useSelector(getNickname);
  const inputAvatar = useRef();
  const formAvatar = useRef();

  const dispatch = useDispatch();
  const handleLogout = (e) => {
    e.preventDefault();
    dispatch(logout(id));
  };
  return (
    <div>
      <form id="file" ref={formAvatar}>
        <span>
          <input
            id="file"
            type="file"
            action="/avatars"
            method="POST"
            ref={inputAvatar}
            className={styles.avatarInput}
            onChange={() => {
              formAvatar.current.submit();
              // console.log("Инпут с файлом", inputAvatar);
            }}
          />
          <button
            type="button"
            className={styles.avatarChoose}
            onClick={() => inputAvatar.current.click()}
          >
            <img src={anonym} className={styles.anonym} alt="" />
          </button>
          {nickName}
        </span>
      </form>
      <button onClick={handleLogout} className={styles.logOutBtn}>
        Logout
      </button>
    </div>
  );
}

服务器部件

const express = require("express");
const quard = require("../../helpers/guard");
const path = require("path");
const multer = require("multer");
const { verifyToken } = require("../../helpers/tokenAuth");

const tempdir = path.join(process.cwd(), "temp");
const uploaddir = path.join(process.cwd(), "upload", "images");

const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, "temp");
  },
  filename: (req, file, cb) => {
    cb(null, file.originalname);
  },
  limit: {
    filesize: 1024000,
  },
});

const uploadMiddleware = multer({ storage });

const { userCtrl } = require("../../controllers/userCtrl");

const router = express.Router();

router.post("/registration", express.json(), userCtrl.createUser);

router.post("/login", express.json(), userCtrl.login);
router.post("/logout", express.json(), userCtrl.logout);

router.post(
  "/user/messages/send",
  verifyToken,
  express.json(),
  userCtrl.sendMessage
);

router.get("/user/messages", verifyToken, express.json(), userCtrl.getMessages);

router.get(
  "/users/current",
  verifyToken,
  express.json(),
  userCtrl.findUserByToken
);

router.get("/messages/", userCtrl.fetchMessages);

router.post(
  "/avatars",
  uploadMiddleware.single("cloudAvatar"),
  userCtrl.cloudAvatar
);

// router.post(
//   "/profile",
//   uploadMiddleware.single("avatar"),
//   userCtrl.addAvatar
// );

module.exports = router;