我遇到了一个问题。我通过点击按钮打开对话框来实现加载化身的过程。选择文件后,会将其发送到后端。处理程序已经写在上面了,它们正在工作。这段代码打开一个窗口,提交一个表单,但是。。。什么也没发生。我甚至不知道如何检查请求是否发送到服务器,因为提交表单会重新加载页面。
客户部分
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;
暂无答案!
目前还没有任何答案,快来回答吧!