牛客网后端项目实战（十三）：账号设置之上传文件

上传文件

• 请求：必须是POST请求
• 表单：enctype=“multipart/form-data”
• Spring MVC：通过 MultipartFile 处理上传文件

开发步骤

• 上传头像
• 获取头像

上传文件/头像

配置文件存储路径

首先上传头像得有一个存储头像的路径，这个路径不能是固定的，因为在本地开发和部署到服务器肯定不一样，目前存到本地，后期也会存到云服务器上。在application.properties里配上头像上传路径。

community.path.domain=http://localhost:8080
community.path.upload=d:/workspace/communityData/upload

访问账号设置页面

前端部分，.html文件

业务层

还是从dao层向controller开发，由于头像直接存在本地，没有存到数据库，这里不涉及dao层。

service层主要处理user表里的headUrl，这个方法在userMapper里写过，直接调用就可以

//修改头像路径
    public int updateHeader(int userId,String headerUrl){
        return userMapper.updateHeader(userId,headerUrl);
    }

表现层

这里用到的是Spring MVC的multipartFile，头像的存储和获取直接在controller层操作。新建一个UserController。

将类的访问路径设为/user。声明日志，注入我们配置好的上传路径，域名，项目路径，以及userService和hostHolder。

@Controller
@RequestMapping("/user")
public class UserController {}
	private static final Logger logger= LoggerFactory.getLogger(UserController.class);
	
	    @Value("${community.path.upload}")
	    private String uploadPath;
	
	    @Value("${community.path.domain}")
	    private String domain;
	
	    @Value("${server.servlet.context-path}")
	    private String contextPath;
	
	    @Autowired
	    private UserService userService;
	
	    @Autowired
	    private HostHolder hostHolder;

第一个方法，用于返回个人设置页面，直接返回模板路径。

@RequestMapping(path = "/setting",method = RequestMethod.GET)
    public String getSettingPage(){
        return "/site/setting";
    }

然后是上传头像的方法，这里从容器获取两个对象，一个是MultiparFile，也就是从浏览器传过来的头像文件，一个是model，用于模型返回信息。

首先对空值进行处理，然后用substring分割出文件后缀，png或者jpg等等。如果没有后缀就提示文件格式不正确。对用户上传的图片重命名，用之前写的生成uuid的方法加上分割出来的文件后缀。

再在我们指定的文件存放位置新建一个文件，文件名使用生成的名字，并记录异常，将异常向上抛出，用于之后的处理。

然后从hostHolder里获取当前用户，更新头像路径。

@RequestMapping(path = "/upload",method = RequestMethod.POST)
    public String uploadHeader(MultipartFile headerImage, Model model){
        if(headerImage==null){
            model.addAttribute("error","您还没有选择图片！");
            return "/site/setting";
        }
        String fileName=headerImage.getOriginalFilename();
        String suffix=fileName.substring(fileName.lastIndexOf("."));
        if(StringUtils.isBlank(suffix)){
            model.addAttribute("error","文件格式不正确！");
            return "/site/setting";
        }

        //生成随机文件名
        fileName= CommunityUtil.generateUUID()+suffix;
        //确定文件存放的路径
        File dest=new File(uploadPath+"/"+fileName);
        try {
            //存储文件
            headerImage.transferTo(dest);
        } catch (IOException e) {
            logger.error("上传文件失败："+e.getMessage());
            throw new RuntimeException("上传文件失败，服务器发生异常！",e);
        }
        //更新当前用户头像路径（web访问路径）
        //http://localhost:8080/community/user/header/xxx.png
        User user=hostHolder.getUser();
        String headerUrl=domain+contextPath+"/user/header/"+fileName;
        userService.updateHeader(user.getId(),headerUrl);
        return "redirect:/index";
    }

获取头像

头像获取，从访问路径中截取头像文件名（我估计是前端从模型 user.headerUrl里面取出的），从容器获取response对象，用服务器存放的全路径覆盖文件名，使用文件输入流和response的输出流，建一个1024字节的缓冲区，从本地头像文件读取，输出到response里。

这里try（）{}的写法是java7的语法，括号里的内容会自动在finally里关闭。

@RequestMapping(path = "/header/{fileName}",method = RequestMethod.GET)
    public void getHeader(@PathVariable("fileName") String fileName, HttpServletResponse response){
        //服务器存放路径
        fileName=uploadPath+"/"+fileName;
        //文件后缀
        String suffix=fileName.substring(fileName.lastIndexOf("."));
        //响应图片
        response.setContentType("/image"+suffix);
        try (
                FileInputStream fileInputStream=new FileInputStream(fileName);
                OutputStream os=response.getOutputStream();
                ){

            byte[] buffer=new byte[1024];
            int b=0;
            while ((b=fileInputStream.read(buffer))!=-1){
                os.write(buffer,0,b);
            }
        } catch (IOException e) {
            logger.error("读取头像失败"+e.getMessage());
        }
    }

运行项目，登录上传头像，可以看到显示头像。