学习上传头像,学完后总是忘记,今天写项目时遇到,记录下来,以后方便观看
上传头像(注意):
1、提交方式一定是post(必须)
2、form表单中添加enctype="multipart/form-data"属性(必须)
3、后端用MultipartFile接收处理(可以使用其他API)
类似如下前端实例代码(仅供参考)
后端代码:
@PostMapping("/upload")
public String uploadImage(MultipartFile headImage, Model model){
if(headImage.isEmpty()){
model.addAttribute("error","您还没有上传图像");
return "/site/setting";
}
//获取上传文件的后缀
String fileName = headImage.getOriginalFilename();
String suffix = fileName.substring(fileName.lastIndexOf(".") + 1);
if(StringUtils.isEmpty(suffix)){
throw new RuntimeException("文件类型错误");
}
//生成随机的存储文件的名字
fileName = CommunityUtils.generateUUID() + "." + suffix;
File dest = new File(uploadPath + "/" + fileName);
try { //上传文件
headImage.transferTo(dest);
} catch (IOException e) {
log.info("上传文件失败" + e.getMessage());
throw new RuntimeException("上传文件失败" + e.getMessage());
}
//更新数据库的图像地址(web地址,客户端进行访问的)
//http://localhost:8080/community/user/header/xxx.png
User user = hostHolder.getValue();
String headerUrl = domain + contextPath + "/user/header/" + fileName;
userService.updateHeaderUrl(user.getId(),headerUrl);
return "redirect:/index";
}
文件上传成功后,数据库也成功将地址改为了web地址,接下来就是访问的环节了
前端访问,例如:
访问到后端,通过response将存放的图片写出到浏览器上
//获取服务器(本地)图片
@GetMapping("/header/{fileName}")
public void getHeader(@PathVariable("fileName") String fileName,HttpServletResponse response){
//服务器存放地址
fileName = uploadPath + "/" + fileName;
//文件后缀
String suffix = fileName.substring(fileName.lastIndexOf(".") + 1);
response.setContentType("image/" + suffix);
try (
FileInputStream fis = new FileInputStream(fileName);
) {
OutputStream os = response.getOutputStream();
byte[] buffer = new byte[1024];
int len = 0;
while((len = fis.read(buffer)) != -1){
os.write(buffer,0,len);
}
} catch (IOException e) {
log.info("读取头像失败" + e.getMessage());
throw new RuntimeException("浏览器读取图片失败" + e.getMessage());
}
}
到此整个上传差不多结束了,仅供参考,代码不足地方还望多多指出