前端文件上传——登陆头像更换

首先在登陆的时候我们应该先记录头像路径等信息

@PostMapping("/login")
	public @ResponseBody boolean login(String userName,String password,HttpSession session)
	{
		User user =userservice.getByNameAndPassword(userName,password);
		if(user==null)
		{
			return false;
		}
		else {
			session.setAttribute("userName", userName);
			session.setAttribute("userId", user.getId());
			session.setAttribute("iconName", user.getIconName());
			return true;
		}
	}

上传文件我就就需要在配置文件中写一些上传文件的控制信息
该信息写在子容器的配置信息里面即可（不是配置文件）。

<multipart-config>
        	<max-file-size>1048576</max-file-size>
        	<max-request-size>10485760</max-request-size>
        	<file-size-threshold>1048576</file-size-threshold>
        </multipart-config>

前端提交图片的代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>modifyIcon</title>
<link rel="stylesheet" href="${cp}/layui/css/layui.css">
<script src="${cp}/layui/layui.js"></script>
<script type="text/javascript" src="${cp}/js/jquery-3.4.1.min.js"></script>

<script>
	//一般直接写在一个js文件中
	//加载layer模块和form模块，加载完成后，调用回调函数
	layui.use('form', function() {
		var form = layui.form;
	});
</script>

</head>

<body class="layui-layout-body">
	<div class="layui-layout layui-layout-admin">
		<!-- 头部导航 -->
		<jsp:include page="header.jsp"></jsp:include>
		<!-- 左侧菜单 -->
		<jsp:include page="left.jsp"></jsp:include>
		<!-- 主题内容 -->
		<div class="layui-body">
			<!-- 内容主体区域 -->
			<div style="padding: 15px;">
				<form class="layui-form" action="${cp}/info/modifyIcon" method="post" enctype="multipart/form-data">
					<div class="layui-form-item">
						<label class="layui-form-label">头像</label>
						<div class="layui-input-inline">
							<input type="file" name="icon" required
								lay-verify="required" placeholder="请选择头像"
								autocomplete="off" class="layui-input">
						</div>
						<div class="layui-form-mid layui-word-aux">原始密码不能为空</div>
					</div>
					

					<div class="layui-form-item">
						<div class="layui-input-block">
							<button class="layui-btn" lay-submit lay-filter="formDemo">修改</button>
							<button type="reset" class="layui-btn layui-btn-primary">重置</button>
						</div>
					</div>
				</form>
			</div>
		</div>
		<!-- 底部内容 -->
		<jsp:include page="footer.jsp"></jsp:include>
	</div>


</body>

</html>

然后在更改头像的时候我们就需要将图片存入相应的运行时图片存储路径下，以及更改用户的图片信息即可。

	@PostMapping("/modifyIcon")
	public String  modifyIcon(MultipartFile icon,HttpServletRequest req) throws IllegalStateException, IOException {
		//获取程序运行时的upload目录的绝对路径
		String uploadPath=req.getServletContext().getRealPath("/upload");
		//文件名后缀
		String suffix=icon.getOriginalFilename().substring(icon.getOriginalFilename().lastIndexOf("."));
		//使用UUID作为文件名
		String fileName=UUID.randomUUID().toString()+suffix;
		String filePath=uploadPath+"\\"+fileName;
		//文件保存到Upload
		icon.transferTo(new File(filePath));
		//文件保存到数据库中
		HttpSession session =req.getSession();
		int userId=(int) session.getAttribute("userId");
		//获取用户基本信息
		User user =userService.getUser(userId);
		//更新用户头像路径信息
		user.setIconName("upload/"+fileName);
		 userService.updateIconName(user);
		 //将session中保存的头像路径信息更新为新的路径
		 session.setAttribute("iconName", user.getIconName());
		 return "redirect:/index";
	}

前端头像图片路径的代码如下
$iconName为session中存储的头像路径
$cp是动态获取根路径。

src="${cp}/${iconName}

原文链接：https://blog.csdn.net/weixin_42263618/article/details/107728505