赞
踩
学习上传头像,学完后总是忘记,今天写项目时遇到,记录下来,以后方便观看
上传头像(注意):
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());
- }
- }
到此整个上传差不多结束了,仅供参考,代码不足地方还望多多指出
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。