Spring boot image를 등록하고 이미지를 불러오는 방법

블로그  나 카페에서 이미지들이 있는 것을 볼 수 있다.

 

 

위와 같은 이미지를 클릭하면 URL이 바뀌는 것을 볼수가 있는데 다음과 같은 방법은 어떻게 하는 것일까?

 

1. 먼저 REST API 상에서 파일을 서버쪽으로 올리게 되는 Spring은 해당 파일을 다음과 같이 저장한다.

 

@ApiOperation(value = "피드 등록 ", notes = "성공시 200, 실패시 에러를 반환합니다. \n ")
	@PostMapping("create")
	public ResponseEntity<String> createFeed( @RequestParam("file") MultipartFile file) {
          // 시간과 originalFilename으로 매핑 시켜서 src 주소를 만들어 낸다.
          Date date = new Date();
          StringBuilder sb = new StringBuilder();

          // file image 가 없을 경우
          if (file.isEmpty()) {
         	 sb.append("none");
          } else {
         	 sb.append(date.getTime());
        	  sb.append(file.getOriginalFilename());
          }

          if (!file.isEmpty()) {
      	    File dest = new File("C://images/feed/" + sb.toString());
            try {
               file.transferTo(dest);
            } catch (IllegalStateException e) {
               e.printStackTrace();
            } catch (IOException e) {
               e.printStackTrace();
            }
          // db에 파일 위치랑 번호 등록
          }
		return new ResponseEntity<String>(SUCCESS, HttpStatus.OK);
	}

소스 설명을 하자면 file 정보를 가져오고 그 값을 내 로컬 어딘가에 저장하는 것이다.
이때 중복이 일어날 수 있으니 파일 속성별 위치저장소 + 현재시간 등을 이용하여 중복값을 없애는 것이 중요하다. 그리고 이러한 정보를 Database에 이름 정보를 저장한다.

이값을 가지고 frontend에서 database에 있는 image 정보를 요청한다면 다음과 같이 getMapping을 이용하여 원하는 이미지를 불러올 수 있다.

 

 

// feed image 반환하기
	@ApiOperation(value = "feed image 조회 ", notes = "feed Image를 반환합니다. 못찾은경우 기본 image를 반환합니다.")
	@GetMapping(value = "image/{imagename}", produces = MediaType.IMAGE_JPEG_VALUE)
	public ResponseEntity<byte[]> userSearch(@PathVariable("imagename") String imagename) throws IOException {
		InputStream imageStream = new FileInputStream("C://images/feed/" + imagename);
		byte[] imageByteArray = IOUtils.toByteArray(imageStream);
		imageStream.close();
		return new ResponseEntity<byte[]>(imageByteArray, HttpStatus.OK);
	}

return 값은 byte 값으로 리턴하게된다 -> 이미지는 byte 배열 형태를 띄고 있다.

GEtMapping으로 image/ URL에 이름을 함께보내면 해당 경로의 image를 FileInputstream의 객체를 만들어서 
byte[] 형태의 값으로 incoding 후 보내게 된다.

이렇게되면 frontend 단에서 img:src="URL/image/{flower}" 를 하게되면 front에서 해당 url을 요청과 동시에 이미지를 불러올수 있다.