STS3 쇼핑몰 프로젝트[24] 상품 이미지 업로드(서버 단계 이미지 파일 체크) - 7

순서

1. 전체적 방향

2. MIME TYPE 데이터 얻기

3. MIME TYPE 체크 및 데이터 반환

4. 뷰(VIEW) 처리

5. 테스트

1. 전체적 방향

전달받은 파일이 이미지인지 체크하기 위해 파일의 MIME TYPE 속성을 활용했습니다.

 

MIME TYPE이란 파일이 어떠한 종류의 파일인지에 대한 정보가 담긴 라벨(Label)입니다.

 

Java에선 파일의 MIME TYPE을 반환해주는 메서드를 제공하는데, nio 패키지 Files 클래스의 probeContentType() 메서드입니다.

 

probeContentType() 메서드를 호출하여 반환받은 MIME TYPE에 대한 데이터가 image인지 확인하여 image인 경우 업로드 코드가 그대로 실행되고, 아닌 경우 상태 코드 400을 뷰에 반환하도록 했습니다.

 

뷰에선 AJAX의 error 속성을 추가하여 상태 코드 400을 전달받았을 때 실행되는 콜백 함수를 속성 값으로 부여하여 잘못된 형식의 파일이라는 경고문을 띄웠습니다.

2. MIME TYPE 데이터 얻기

파일의 유형을 확인하는 코드는 업로드 실행 전에 실행되어야 하기 때문에 업로드 URL 매핑 메서드 구현부의 최상단에 코드를 작성했습니다.

 

전달받은 모든 파일의 유형을 체크해야 하기 때문에 for문을 작성하고, 먼저 전달받은 파일(uploadFile)을 File 객체로 만들어주고, File 참조 변수에 대입합니다.

/* 이미지 파일 체크 */
for(MultipartFile multipartFile: uploadFile) {
			
	File checkfile = new File(multipartFile.getOriginalFilename());
			
}

이후 MIME TYPE을 저장할 String 타입의 type 변수를 선언하고 null로 초기화합니다.

/* 이미지 파일 체크 */
for(MultipartFile multipartFile: uploadFile) {
			
	File checkfile = new File(multipartFile.getOriginalFilename());
	String type = null;
			
}

Files의 probeContentType() 메서드를 호출하여 반환하는 MIME TYPE 데이터를 type 변수에 대입합니다.

/* 이미지 파일 체크 */
for(MultipartFile multipartFile: uploadFile) {
			
	File checkfile = new File(multipartFile.getOriginalFilename());
	String type = null;
			
	type = Files.probeContentType(checkfile.toPath());
			
}

probeContentType() 메서드는 파라미터로 전달받은 파일의 MIME TYPE을 문자열(String)로 반환해주는 메서드입니다.

파라미터로 Path 객체를 전달받아야 하기 때문에 MIME TYPE 확인 대상이자 File 객체인 checkfile을 Path객체로 만들어 주기 위해 toPath() 메서드를 사용했습니다.

 

추가적으로 probeContentType() 메서드의 경우 IOException 예외를 발생시킬 가능성이 크므로 try-catch 문으로 감싸줍니다.

3. MIME TYPE 체크 및 데이터 반환

위의 과정을 통해 전달 받은 파일이 어떤 MIME TYPE을 가졌는지 데이터를 얻었고, 해당 데이터가 image인지 확인을 하기 위해 아래와 같이 if문을 작성했습니다.

// MIME TYPE이 image가 아닌 경우 구현부가 실행이 되는 if문
if (!type.startsWith("image")) {
	// image가 아니라는 것이기 때문에 메서드 끝!
	List<AttachImageVO> list = null;
	// 상태 코드가 400인 ResponseEntity 객체를 인스턴스화 하여 이를 반환해주는 코드
	return new ResponseEntity<>(list, HttpStatus.BAD_REQUEST);
}

해당 구현부가 실행됐다는 것은 image가 아니라는 것이기 때문에 파일에 대한 정보를 뷰에 전달해 줄 필요가 없습니다만, 명령이 잘못되었음을 전달하기 위해 response의 상태 코드(status)를 400으로 반환해줬습니다.

 

전달해 줄 파일 정보는 없지만 반환 타입이 ResponseEntity <List <AttachImageVO>>이기 때문에 값이 null인 List <AttachImageVO> 타입의 참조 변수를 선언했습니다.

4. 뷰(VIEW) 처리

잘못된 파일이 전달됐음을 알리는 response를 전달받았을 때 이를 처리해 줄 코드를 추가했습니다.

 

에러 상태 코드일 때 응답하는 error 속성을 추가했고, 속성 값으로 콜백 함수를 부여했습니다.

$.ajax({
	url: '/admin/uploadAjaxAction',
	   processData : false,
	   contentType : false,
	   data : formData,
	   type : 'POST',
	   dataType : 'json',
	   success : function(result){
	    console.log(result);
	   },
	   error : function(result){
	    alert("이미지 파일이 아닙니다.");
	   }
});

5. 테스트

테스트를 위해 이미지가 아닌 파일을 전송해야 하기 때문에 뷰(VIEW)에서 이미지 파일 체크를 하는 JavaScript 코드를 주석 처리했습니다.