页面
<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