页面
<li> <span>当前头像:</span> <!-- <img src="./images/user-lg.png" alt=""> --> <img style="width:100px;height:100px" th:src="@{/headImg?id=} + ${session.member.id}" onerror="defaultImg(this)"/> <!-- <img th:value="${session.member.headImg}" > --> <div style="float:center;margin-left:140px"> <form action="/saveImg" method="post" enctype ="multipart/form-data"> <label for="file" class="btn btn-primary" style="float: left;height: 30px;width: 100px;margin-right: 20px">选择照片</label> <input id="file" name="file" type="file" style="float: left;display:none"/> <input name="id" type="hidden" th:value="${session.member.id}"/> <input class="btn btn-primary" type="submit" value="提交" style="float: left"> </form> </div> </li> <script> function defaultImg(img){ img.src="/images/user-lg.png"; } </script>
controller层
@RequestMapping("/saveImg")//its maximum permitted size of 1048576 bytes. public String saveUserImg(MultipartFile file,Member member) { Map<String,Object> result = new HashMap<String,Object>(); try { // 获取客户端传图图片的输入流 InputStream ins = file.getInputStream(); byte[] buffer=new byte[2048];//bit---byte---1k---1m int len=0; // 字节输出流 ByteArrayOutputStream bos=new ByteArrayOutputStream(); while((len=ins.read(buffer))!=-1){ bos.write(buffer,0,len); } bos.flush(); byte img[] = bos.toByteArray(); member.setHeadImg(img); System.out.println("图片==="+member.getHeadImg()); int i=memberService.saveImg(member);//修改数据库 result.put("code",i); result.put("msg", "保存头像成功"); } catch (Exception e) { result.put("code",0); result.put("msg", "保存头像失败"); return "uploaderror"; } return "e-commerce_account"; } @RequestMapping(value = "/headImg", produces = MediaType.IMAGE_PNG_VALUE) public ResponseEntity<byte[]> headImg(String id) throws Exception{ byte[] imageContent ; // 根据id获取当前用户的信息 Member member = memberService.selectMemberById(id); imageContent = member.getHeadImg(); System.out.println("图片==="+member.getHeadImg());//member.getCzyxm() // 设置http头部信息 final HttpHeaders headers = new HttpHeaders(); headers.setContentType(MediaType.IMAGE_PNG); // 返回响应实体 return new ResponseEntity<byte[]>(imageContent, headers, HttpStatus.OK); }
Service层
@Override public int saveImg(Member member) throws Exception { int i = memberMapper.saveUserImg(member); if(i!=1) { throw new Exception("更新用户头像失败"); } return i; }
Mapper层
<update id="saveUserImg" parameterType="com.datangedu.cn.model.Member"> update member set HEAD_IMG = #{headImg} where id = #{id} </update>
另外 上传图片不能过大
修改 Spring Boot工程嵌入的tomcat限制了请求的文件大小(未亲测)
需要设置以下两个参数 multipart.maxFileSize multipart.maxRequestSize Spring Boot 1.3.x或者之前 multipart.maxFileSize=100Mb multipart.maxRequestSize=1000Mb Spring Boot 1.4.x spring.http.multipart.maxFileSize=100Mb spring.http.multipart.maxRequestSize=1000Mb 很多人设置了multipart.maxFileSize但是不起作用,是因为1.4版本以上的配置改了,详见官方文档:spring boot 1.4 Spring Boot 2.0之后 spring.servlet.multipart.max-file-size=100MB spring.servlet.multipart.max-request-size=1000MB