仿牛客论坛项目之修改用户头像

前言：
在项目最开始的时候，我们默认从牛客网的静态资源库中选择一张照片作为用户的头像，但在实际开发中，我们还要考虑用户可以自己设置头像。

思路：
上传文件（上传到硬盘服务器上 或者 上传到云服务器上，开发过程中将文件传输到自己电脑的，项目上线后将路径改变即可）
● 请求：必须是post请求
● 表单：enctype=“multipart/form-data”
● Spring MVC：通过 MultipartFile 处理上传文件

开发步骤：
● 访问账号设置页面
● 上传头像
● 获取头像

1 编写文件存储路径

在application.properties中编写。

# 项目路径
server.servlet.context-path=/community
# communtiy 域名
community.path.domain=http://localhost:8080
# 文件上传地址
community.path.upload=d:/upload_test/data/upload

2 编写 controller 类

package com.zcq.community.controller;

import com.zcq.community.annotation.LoginRequired;
import com.zcq.community.entity.User;
import com.zcq.community.service.UserService;
import com.zcq.community.util.CommunityUtil;
import com.zcq.community.util.HostHolder;
import org.apache.commons.lang3.StringUtils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletResponse;
import java.io.*;

@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;

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

	// 上传用户的头像
    @LoginRequired
    @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("上传文件失败, 服务器发生异常");
        }
        // 更新当前用户的头像的路径(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";
    }

    // 获取头像, 在浏览器上显示
    @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 需要手动关闭，OutputStream response对象会自动关闭
            FileInputStream fis = new FileInputStream(fileName);
            OutputStream os = response.getOutputStream();
        )
        {
            // 二进制形式保存文件
            byte[] buffer = new byte[1024];
            int b = 0;
            // 等于 -1 就结束
            while ((b = fis.read(buffer)) != -1) {
                os.write(buffer, 0, b);
            }

        } catch (IOException e) {
            logger.error("读取头像失败" + e.getMessage());

        }

    }

}

3 编写前端代码

<form method="post" enctype="multipart/form-data" th:action="@{/user/upload}">
	<div>
		<label>选择头像:</label>
		<div>
			<div>
				<!-- 注意: name属性与所需要的参数名称保持一致 -->
				<!-- div里的内容默认不显示(靠前端代码实现)，只有当th:class不为空时才显示数据 -->
				<input type="file" th:class="|custom-file-input ${error!=null?'is-invalid':''}|"
					   id="head-image" name="headerImage" lang="es" required="">
				<label>选择一张图片</label>
				<div th:text="${error}">
					该账号不存在!
				</div>
			</div>
		</div>
	</div>
	<div>
		...
	</div>
</form>

4 说明

头像大小不能过大，否则会导致无法存入！