Java web实现头像上传以及读取显示

Java Web 实现头像上传以及读取显示的攻略可以分为以下几个步骤：

1. 在前端页面设计上传头像的区域，使用表单提交图片数据到后端。
2. 在后端接收到图片数据后，进行图片的存储和保存。
3. 在后端读取已经保存的图片，将其以二进制形式返回给前端并进行显示。

下面我们对每个步骤进行详细的讲解。

设计头像上传区域

在 HTML 页面中添加一个表单，来选择并提交要上传的头像图片：

<form enctype="multipart/form-data" action="upload" method="post">
  <input type="file" name="avatar" />
  <input type="submit" value="上传头像" />
</form>

其中 enctype="multipart/form-data" 用于设置表单类型为二进制表单数据类型，可以支持提交二进制文件数据。action 属性用于指定表单数据提交到后端的 API 地址。

存储和保存图片

在后端我们需要设计一个 API 来接收前端提交的数据并且进行图片的存储和保存。

@PostMapping("/upload")
public Object upload(MultipartFile avatar) throws IOException {
  // 检查文件是否为空
  if (avatar.isEmpty()) {
    return "请选择上传文件";
  }

  // 获取文件名
  String fileName = avatar.getOriginalFilename();

  // 设置文件保存目录
  String filePath = "D:/uploads/";

  // 创建文件路径
  File destFile = new File(filePath + fileName);

  // 检查文件是否存在
  if (destFile.exists()) {
    return "文件已经存在";
  }

  // 保存文件
  avatar.transferTo(destFile);
  return "文件上传成功";
}

这个 API 的实现逻辑主要包括检查文件是否为空、获取文件名称、设置文件保存路径和创建文件等操作。最重要的是在最后通过 transferTo() 方法将上传的文件保存到指定的文件目录。

读取和显示图片

在已经存储了用户头像的情况下，当用户请求访问自己的头像时，后端需要通过 API 返还图片的二进制数据。

@Slf4j
@Controller
public class AvatarController {
    @GetMapping(value = "/avatar/{filename}")
    public ResponseEntity<byte[]> getAvatarByName(@PathVariable(value = "filename") String filename) throws IOException {
        //读取指定目录下面的图片内容
        File file = new File("D:/uploads/"+filename+".jpg");
        FileInputStream inputStream = new FileInputStream(file);
        byte[] bytes = new byte[inputStream.available()];
        inputStream.read(bytes, 0, inputStream.available());

        // 设置响应的请求头
        HttpHeaders headers = new HttpHeaders();
        headers.add("Content-Type", "image/jpeg");

        // 构造 ResponseEntity 对象
        ResponseEntity<byte[]> responseEntity = new ResponseEntity<byte[]>(bytes, headers, HttpStatus.OK);
        return responseEntity;
    }
}

其中，@GetMapping 注解用于绑定 API 的请求路径和请求类型。在 API 的实现过程中，我们需要读取指定目录下面的图片内容并返回二进制数据。

示例

下面提供两个针对用户头像上传和显示的完整示例：

1. Spring Boot 文件上传实例：https://www.jianshu.com/p/764e66efe4fd
2. Spring Boot 图片上传示例：https://www.cnblogs.com/xuecoding/p/11939329.html