spring实现图片上传与读取

简介: spring实现图片上传与读取

• 上传文件

- 请求:必须是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.     }

源代码地址:

牛客论坛: 牛客论坛

目录
相关文章
|
前端开发 Java Spring
Spring Boot 实现图片上传并回显
Spring Boot 实现图片上传并回显
|
4月前
|
前端开发 Java Spring
Spring Boot 实现图片上传并回显
Spring Boot 实现图片上传并回显
98 0
|
9月前
|
前端开发 Java Spring
Java Spring MVC 图片上传操作详解
在现代的Web开发中,图片上传是一个非常常见的需求。而Java Spring MVC框架则是JavaWeb开发中常用的框架之一。本文将介绍如何在Java Spring MVC框架中实现图片上传操作。
90 0
|
Java 测试技术 数据安全/隐私保护
Spring Boot开发图片上传并添加水印接口
现在越来越注重版本的问题,所以很多的文章都需要进行署名,类似于这样:
642 0
Spring Boot开发图片上传并添加水印接口
|
JSON 前端开发 JavaScript
Spring Boot 实现多图片上传并回显,涨姿势了~
这两天公司有需求让做一个商户注册的后台功能,其中需要商户上传多张图片并回显。由于之前没做过这方面的东西,此篇文章用以记录一些知识点,以便后续查看。
Spring Boot 实现多图片上传并回显,涨姿势了~
|
2月前
|
Java 应用服务中间件 Maven
SpringBoot 项目瘦身指南
SpringBoot 项目瘦身指南
54 0
|
2月前
|
缓存 安全 Java
Spring Boot 面试题及答案整理,最新面试题
Spring Boot 面试题及答案整理,最新面试题
138 0
|
1月前
|
存储 JSON Java
SpringBoot集成AOP实现每个接口请求参数和返回参数并记录每个接口请求时间
SpringBoot集成AOP实现每个接口请求参数和返回参数并记录每个接口请求时间
45 2
|
2月前
|
前端开发 搜索推荐 Java
【Spring底层原理高级进阶】基于Spring Boot和Spring WebFlux的实时推荐系统的核心:响应式编程与 WebFlux 的颠覆性变革
【Spring底层原理高级进阶】基于Spring Boot和Spring WebFlux的实时推荐系统的核心:响应式编程与 WebFlux 的颠覆性变革