• 上传文件
- 请求:必须是POST请求
- 表单:enctype=“multipart/form-data”
- Spring MVC:通过 MultipartFile 处理上传文件
• 开发步骤
-编写前端访问账号设置页面
上传页面
1. <h6 class="text-left text-info border-bottom pb-2">上传头像</h6> 2. <form class="mt-5" method="post" enctype="multipart/form-data" th:action="@{/user/upload}"> 3. <div class="form-group row mt-4"> 4. <label for="head-image" class="col-sm-2 col-form-label text-right">选择头像:</label> 5. <div class="col-sm-10"> 6. <div class="custom-file"> 7. <input type="file" th:class="|custom-file-input ${error!=null?'is-invalid':''}|" 8. id="head-image" name="headerImage" lang="es" required=""> 9. <label class="custom-file-label" for="head-image" data-browse="文件">选择一张图片</label> 10. <div class="invalid-feedback" th:text="${error}"> 11. 该账号不存在! 12. </div> 13. </div> 14. </div> 15. </div> 16. <div class="form-group row mt-4"> 17. <div class="col-sm-2"></div> 18. <div class="col-sm-10 text-center"> 19. <button type="submit" class="btn btn-info text-white form-control">立即上传</button> 20. </div> 21. </div> 22. </form>
浏览页面
1. <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 2. <img th:src="${loginUser.headerUrl}" class="rounded-circle" style="width:30px;"/> 3. </a>
- 上传头像接口
1. @LoginRequired 2. @RequestMapping(path = "/setting",method = RequestMethod.POST) 3. public String settingPassword(String oldPassword,String newPassword 4. ,Model model,@CookieValue("ticket") String ticket){ 5. User user = hostHodler.getUser(); 6. if(user==null){ 7. return "/site/login"; 8. } 9. if(user.getPassword().equals(CommunityUtil.md5(oldPassword+user.getSalt()))){ 10. userService.changePassword(user.getEmail(),newPassword); 11. userService.logout(ticket); 12. model.addAttribute("msg","修改密码成功,请尝试登陆"); 13. model.addAttribute("target","/login"); 14. return "/site/operate-result"; 15. } else { 16. model.addAttribute("passwordMsg","旧密码输入不正确"); 17. return "/site/setting"; 18. } 19. } 20. @LoginRequired 21. @RequestMapping(path = "/upload", method = RequestMethod.POST) 22. public String uploadHeader(MultipartFile headerImage, Model model) { 23. if (headerImage == null) { 24. model.addAttribute("error", "您还没有选择图片!"); 25. return "/site/setting"; 26. } 27. 28. String fileName = headerImage.getOriginalFilename(); 29. String suffix = fileName.substring(fileName.lastIndexOf(".")); 30. if (StringUtils.isBlank(suffix)) { 31. model.addAttribute("error", "文件的格式不正确!"); 32. return "/site/setting"; 33. } 34. 35. // 生成随机文件名 36. fileName = CommunityUtil.generateUUID() + suffix; 37. // 确定文件存放的路径 38. File dest = new File(uploadPath + "/" + fileName); 39. try { 40. // 存储文件 41. headerImage.transferTo(dest); 42. } catch (IOException e) { 43. logger.error("上传文件失败: " + e.getMessage()); 44. throw new RuntimeException("上传文件失败,服务器发生异常!", e); 45. } 46. 47. // 更新当前用户的头像的路径(web访问路径) 48. // http://localhost:8080/community/user/header/xxx.png 49. User user = hostHolder.getUser(); 50. String headerUrl = domain + contextPath + "/user/header/" + fileName; 51. userService.updateHeader(user.getId(), headerUrl); 52. 53. return "redirect:/index"; 54. }
- 获取头像接口
1. @RequestMapping(path = "/header/{fileName}", method = RequestMethod.GET) 2. public void getHeader(@PathVariable("fileName") String fileName, HttpServletResponse response) { 3. // 服务器存放路径 4. fileName = uploadPath + "/" + fileName; 5. // 文件后缀 6. String suffix = fileName.substring(fileName.lastIndexOf(".")); 7. // 响应图片 8. response.setContentType("image/" + suffix); 9. try ( 10. FileInputStream fis = new FileInputStream(fileName); 11. OutputStream os = response.getOutputStream(); 12. ) { 13. byte[] buffer = new byte[1024]; 14. int b = 0; 15. while ((b = fis.read(buffer)) != -1) { 16. os.write(buffer, 0, b); 17. } 18. } catch (IOException e) { 19. logger.error("读取头像失败: " + e.getMessage()); 20. } 21. }
源代码地址: