这是我想要实现的功能，请大家帮忙看看代码这样写能实现吗？我运行时网页控制台报错：
POST http://localhost:8080/uploadAvatar 400 (Bad Request)
基于SSM框架实现项目启动时进入登录界面，输入用户名、密码后进入用户信息展示页面，有用户昵称，邮箱，头像，点击头像可以上传图片修改头像，图片保存到Web项目下的img文件夹，图片的地址保存到数据库并在前台显示上传的图片。用户表中有多个用户，上传的图片要保存到相对应的用户栏中，且上传新的图片地址数据时会删除旧的图片地址数据。
UserMapper.xml:
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.shm.mapper.UserMapper">
<insert id="addUser" parameterType="com.shm.domain.User">
INSERT INTO user (user_name,user_password,user_email,user_role,user_status,photo)
VALUES (#{name},#{password},#{email},#{role},'0','img/user.jpg')
</insert>
<update id="updateUser" parameterType="com.shm.domain.User">
UPDATE user SET photo = #{photo} WHERE user_email = #{email}
</update>
</mapper>
UserServiceImpl.java:
@Service
public class UserServiceImpl implements UserService {
//注入userMapper
@Autowired
private UserMapper userMapper;
//通过User的用户账号和用户密码查询用户信息
@Override
public User login(User user) {
return userMapper.login(user);
}
public void addUser(User user) {
userMapper.addUser(user);
}
public void updateUser(String email, String photo){userMapper.updateUser(email,photo);}
}
UserController.java:
@Controller
public class UserController {
@RequestMapping("/toMainPage")
public String toMainPage() {
return "main";
}
//注入userService
@Autowired
private UserService userService;
//注册用户
@RequestMapping(value = "/register")
public String register(User user,HttpServletRequest request,Model model) {
System.out.println(user);
userService.addUser(user);
request.setAttribute("msg", "注册成功");
return "login3";
}
/*
用户登录
*/
@RequestMapping("/login")
public String login(User user, HttpServletRequest request, HttpSession session) {
try {
User u = userService.login(user);
/*
用户账号和密码是否查询出用户信息
是：将用户信息存入Session，并跳转到后台首页
否：Request域中添加提示信息，并转发到登录页面
*/
if (u != null) {
// request.getSession().setAttribute("USER_SESSION",u);
session.setAttribute("USER_SESSION", u);
return "redirect:/admin/main.jsp";
}
request.setAttribute("msg", "用户名或密码错误");
return "forward:/admin/login3.jsp";
} catch (Exception e) {
e.printStackTrace();
request.setAttribute("msg", "系统错误");
return "forward:/admin/login3.jsp";
}
}
/*
注销登录
*/
@RequestMapping("/logout")
public String logout(HttpServletRequest request) {
try {
HttpSession session = request.getSession();
//销毁Session
session.invalidate();
return "forward:/admin/login3.jsp";
} catch (Exception e) {
e.printStackTrace();
request.setAttribute("msg", "系统错误");
return "forward:/admin/login3.jsp";
}
}
// 跳转个人信息页面
@RequestMapping("/toInfo")
public ModelAndView toInfo(HttpServletRequest request, HttpSession session){
//获取当前登录的用户
User user = (User) request.getSession().getAttribute("USER_SESSION");
ModelAndView modelAndView = new ModelAndView();
modelAndView.setViewName("xxuser");
return modelAndView;
}
//用户修改头像
@RequestMapping("/uploadAvatar")
@ResponseBody
public String uploadAvatar(@RequestParam("file") MultipartFile file, HttpServletRequest request,HttpSession session) {
// 获取当前用户邮箱
String userId = getCurrentUserId(request, session);
// 保存图片到服务器
String fileName = file.getOriginalFilename();
String filePath = "img/" + fileName;
try {
file.transferTo(new File(filePath));
} catch (IOException e) {
return "上传失败";
}
// 更新数据库中的头像地址
userService.updateUser(userId, filePath);
return "上传成功";
}
// 获取当前登录用户ID的方法
private String getCurrentUserId(HttpServletRequest request,HttpSession session) {
//获取当前登录的用户邮箱
String email = ((User) session.getAttribute("USER_SESSION")).getEmail();
return email;
}
}
前端页面代码：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>个人信息</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
/* CSS样式 */
</style>
</head>
<body>
<div id="userInfo">
<h2>${USER_SESSION.name}</h2>
<p>Email: ${USER_SESSION.email}</p>
<img id="avatar" src=${pageContext.request.contextPath}/${USER_SESSION.photo} alt="Avatar">
<input type="file" id="fileInput" accept="image/*">
<button onclick="uploadAvatar()">Upload Avatar</button>
</div>
<script src="${pageContext.request.contextPath}/js/xx.js"></script>
</body>
</html>
js部分：
function uploadAvatar() {
var fileInput = document.getElementById('fileInput');
var file = fileInput.files;
if (!file) {
alert('Please choose a file.');
return;
}
var formData = new FormData();
formData.append('file', file);
$.ajax({
url: 'http://localhost:8080/uploadAvatar',
type: 'POST',
data: formData,
processData: false,
contentType: false,
success: function(response) {
if (response === '上传成功') {
alert("头像更换成功")
} else {
alert("头像更换失败");
}
},
error: function() {
alert('An error occurred during upload.');
}
});
}
