STS3 쇼핑몰 프로젝트[25] 업로드 된 이미지 출력 - 1

순서

1. 전체 방향

2. URL 매핑 메서드 작성 및 File 객체 생성

3. 'Content Type' 명시 및 데이터 파일 변환

4. 테스트

1. 전체 방향

'파일 경로(유동 경로)' + '파일 이름' 데이터를 파라미터로 전달받고, 해당 데이터에 맞는 이미지 파일을 찾아 뷰(VIEW)에 이미지 데이터를 전송했습니다.

 

이미지 파일을 주고받기 위한 데이터 타입은 byte 배열(byte [])로 했습니다. 이미지 파일은 바이너리 파일 범주에 들어가기 때문입니다.

 

URL 매핑 메서드의 반환 타입은 ResponseEntity 객체를 사용했습니다. ResponseEntity의 경우 HTTP response 메시지의 header와 status를 조작할 수 있기 때문입니다.

이미지 출력 메서드 구현 방식

1. 파라미터로 전달받은 '파일 경로'와 '파일 이름'을 활용하여 대상 이미지 파일을 File 객체로 생성
2. 해당 File 객체를 활용하여 MIME TYPE에 대한 정보를 알아냄
3. ResponseEntity에 대상 이미지 데이터를 복사하여 body에 추가해주고, header의 'Content Type'에 앞에서 얻어낸 MIME TYPE으로 수정
4. 이후 ResponseEntity 객체를 호출한 뷰(VIEW)로 전송

2. URL 매핑 메서드 작성 및 File 객체 생성

이미지 데이터를 전달해주는 매핑 메서드 선언부를 SWANController.java에 추가했습니다.

 

관리자 관련 기능을 구현하고 있어서 AdminController.java에 추가해야 한다고 생각할 수도 있지만, AdminController에 접근하기 위해선 Interceptor 필터를 거쳐야 하기 때문에 접근하는데 제한이 있기 때문에 SWANController에 추가했습니다.

 

SWANController.java에 아래와 같은 URL 매핑 메서드를 작성합니다.

@GetMapping("/display")
public ResponseEntity<byte[]> getImage(String fileName){
		
}

반환 타입은 ResponseEntity 객체를 통해 Body에 byte [] 데이터를 보내야 하기 때문에 ResponseEntity <byte []>로 작성했습니다.

 

파라미터의 경우 '파일 경로' + '파일 이름'을 전달받아야 하기 때문에 String 타입의 fileName 변수를 파라미터로 부여했습니다.

 

URL 경로를 통해 변수와 변수 값을 부여할 수 있도록 @GetMapping 어노테이션을 사용했습니다.

 

기본 경로에 문자열 데이터와 전달받은 '유동 경로' + '파일 이름'을 활용하여 File 객체를 생성해주고 File 타입의 참조 변수에 대입합니다.

File file = new File("c:\\upload\\" + fileName);

3. 'Content Type' 명시 및 데이터 파일 변환

ResponseEntity에 Response의 header에 대한 설정을 추가해주기 위해 ResponseEntity(T body, MultiValueMap <String, String> headers, HttpStatus status) 생성자를 사용했습니다.

 

첫 번째 파라미터에 body에 첨부할 데이터를 추가하고, 두 번째 파라미터에 header의 설정이 부여된 객체를 추가하고, 세 번째 파라미터에 전송하고자 하는 상태 코드와 관련된 코드를 추가했습니다.

---

뷰(VIEW)로 반환할 ResponseEntity 객체의 주소를 저장할 참조 변수를 선언하고 null로 초기화합니다.

ResponseEntity<byte[]> result = null;

대상 이미지 파일의 MIME TYPE을 얻기 위해 Files 클래스의 proveContentType() 메서드를 사용합니다. 해당 메서드의 경우 IOException을 발생시킬 가능성이 크기 때문에 try-catch문을 추가합니다.

ResponseEntity<byte[]> result = null;
		
try {
			
	}catch (IOException e) {
		e.printStackTrace();
}

ResponseEntity에 Response의 header와 관련된 설정의 객체를 추가해주기 위해 HttpHeaders를 인스턴스화 한 후 참조 변수로 선언하여 대입합니다.

ResponseEntity<byte[]> result = null;
		
try {
			
	HttpHeaders header = new HttpHeaders();
			
	}catch (IOException e) {
	e.printStackTrace();
}

header의 'Content Type' 속성 값에 이미지 파일 MIME TYPE을 추가해 주기 위해 HttpHeaders 클래스에 있는 add() 메서드를 사용합니다.

 

add() 메서드의 첫 번째 파라미터엔 Response header의 속성 명, 두 번째 파라미터엔 해당 속성 명에 부여할 값(value)을 넣으면 됩니다.

 

header의 'Content Type'에 대상 파일의 MIME TYPE을 부여해주는 코드를 추가합니다.

ResponseEntity<byte[]> result = null;	
try {	
	HttpHeaders header = new HttpHeaders();	
	header.add("Content-type", Files.probeContentType(file.toPath()));			
}catch (IOException e) {
	e.printStackTrace();
}

대상 이미지 파일, header 객체, 상태 코드를 인자 값으로 부여한 생성자를 통해 ResponseEntity 객체를 생성하여 ResponseEntity 참조 변수에 대입합니다.

ResponseEntity<byte[]> result = null;
		
try {
			
	HttpHeaders header = new HttpHeaders();
			
	header.add("Content-type", Files.probeContentType(file.toPath()));
			
	result = new ResponseEntity<>(FileCopyUtils.copyToByteArray(file), header, HttpStatus.OK);
			
}catch (IOException e) {
	e.printStackTrace();
}

FileCopyUtils 클래스

파일과 stream 복사에 사용할 수 있는 메서드를 제공하는 클래스입니다. copyToByteArray() 메서드는 파라미터로 부여하는 대상 파일을 복사하여 Byte []로 반환해주는 메서드입니다.

---

두 번째 파라미터는 'Content-Type' 속성을 지정해 준 HttpHeader 객체인 header를 인자로 부여합니다.

세 번째 파라미터는 상태 코드(status) 200이 전송되도록 HttpStatus.OK를 인자로 부여합니다.

 

이후 URL 매핑 메서드의 return에 생성한 ResponseEntity 객체인 result를 작성합니다.

ResponseEntity<byte[]> result = null;
		
try {
			
	HttpHeaders header = new HttpHeaders();
			
	header.add("Content-type", Files.probeContentType(file.toPath()));
			
	result = new ResponseEntity<>(FileCopyUtils.copyToByteArray(file), header, HttpStatus.OK);
			
}catch (IOException e) {
	e.printStackTrace();
}
		
return result;

4. 테스트

실제로 이미지 출력이 되는지 서버를 실행시켜 확인합니다.

 

테스트를 위해 아래 사진을 "C:\upload\" 경로에 추가한 후 해당 파일을 웹에서 출력시켜봅니다.

웹에서 display 메서드를 호출해봅니다. URL의 쿼리 스트링에 변수 fileName과 그 값을 부여합니다.

 

해당 테스트를 위해 추가한 이미지는 고정 경로에 바로 추가했기 때문에 유동 경로 값 없이 파일 이름만 부여하면 됩니다.

이번엔 유동 경로에 파일을 추가하여 출력해봅니다. "2022\09\26"에 "싸인.png" 파일을 추가합니다.

URL 쿼리 스트링에 이동 경로를 포함한 값을 작성합니다. 이때 쿼리 스트링의 유동 경로엔 "\"가 아닌 "/"를 사용해야 합니다.