前言：
在项目最开始的时候，我们默认从牛客网的静态资源库中选择一张照片作为用户的头像，但在实际开发中，我们还要考虑用户可以自己设置头像。
思路：
上传文件（上传到硬盘服务器上 或者 上传到云服务器上，开发过程中将文件传输到自己电脑的，项目上线后将路径改变即可）
● 请求：必须是post请求
● 表单：enctype=“multipart/form-data”
● Spring MVC：通过 MultipartFile 处理上传文件
开发步骤：
● 访问账号设置页面
● 上传头像
● 获取头像
文章目录
1 编写文件存储路径2 编写 controller 类3 编写前端代码4 说明1 编写文件存储路径
在application.properties中编写。
# 项目路径server.servlet.context-path=/community# communtiy 域名community.path.domain=http://localhost:8080# 文件上传地址community.path.upload=d:/upload_test/data/upload
2 编写 controller 类
package munity.controller;import munity.annotation.LoginRequired;import munity.entity.User;import munity.service.UserService;import munityUtil;import munity.util.HostHolder;import mons.lang3.StringUtils;import org.slf4j.Logger;import org.slf4j.LoggerFactory;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.beans.factory.annotation.Value;import org.springframework.stereotype.Controller;import org.springframework.ui.Model;import org.springframework.web.bind.annotation.PathVariable;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestMethod;import org.springframework.web.multipart.MultipartFile;import javax.servlet.http.HttpServletResponse;import java.io.*;@Controller@RequestMapping("/user")public class UserController {private static final Logger logger = LoggerFactory.getLogger(UserController.class);@Value("${community.path.upload}")private String uploadPath;@Value("${community.path.domain}")private String domain;@Value("${server.servlet.context-path}")private String contextPath;@Autowiredprivate UserService userService;@Autowiredprivate HostHolder hostHolder;// 访问 /setting 路径@LoginRequired@RequestMapping(path = "/setting", method = RequestMethod.GET)public String getSettingPage() {return "/site/setting";}// 上传用户的头像@LoginRequired@RequestMapping(path = "/upload", method = RequestMethod.POST)public String uploadHeader(MultipartFile headerImage, Model model) {if(headerImage == null) {model.addAttribute("error", "您还没有选择图片");return "/site/setting";}// 读取并暂存文件的后缀String fileName = headerImage.getOriginalFilename();String suffix = fileName.substring(fileName.lastIndexOf("."));if(StringUtils.isBlank(suffix)) {model.addAttribute("error", "文件的格式不正确");return "/site/setting";}// 生成随机文件名fileName = CommunityUtil.generateUUID() + suffix;// 确定文件存放的路径File dest = new File(uploadPath + "/" +fileName);try {// 存储文件headerImage.transferTo(dest);} catch (IOException e) {logger.error("上传文件失败" + e.getMessage());throw new RuntimeException("上传文件失败, 服务器发生异常");}// 更新当前用户的头像的路径(web路径)// http://localhost:8080/community/user/header/xxx.pngUser user = hostHolder.getUser();String headerUrl = domain + contextPath + "/user/header/" +fileName;userService.updateHeader(user.getId(), headerUrl);return "redirect:/index";}// 获取头像, 在浏览器上显示@RequestMapping(path = "/header/{fileName}", method = RequestMethod.GET)public void getHeader(@PathVariable("fileName") String fileName, HttpServletResponse response) {// 服务器存放的路径fileName = uploadPath + "/" + fileName;// 文件的后缀String suffix = fileName.substring(fileName.lastIndexOf("."));// 响应图片response.setContentType("image/" + suffix);try(// FileInputStream 需要手动关闭，OutputStream response对象会自动关闭FileInputStream fis = new FileInputStream(fileName);OutputStream os = response.getOutputStream();){// 二进制形式保存文件byte[] buffer = new byte[1024];int b = 0;// 等于 -1 就结束while ((b = fis.read(buffer)) != -1) {os.write(buffer, 0, b);}} catch (IOException e) {logger.error("读取头像失败" + e.getMessage());}}}
3 编写前端代码
<form method="post" enctype="multipart/form-data" th:action="@{/user/upload}"><div><label>选择头像:</label><div><div><!-- 注意: name属性与所需要的参数名称保持一致 --><!-- div里的内容默认不显示(靠前端代码实现)，只有当th:class不为空时才显示数据 --><input type="file" th:class="|custom-file-input ${error!=null?'is-invalid':''}|"id="head-image" name="headerImage" lang="es" required=""><label>选择一张图片</label><div th:text="${error}">该账号不存在!</div></div></div></div><div>...</div></form>
4 说明
头像大小不能过大，否则会导致无法存入！
