STS3 쇼핑몰 프로젝트[24] 상품 이미지 업로드(이미지 정보 뷰 반환2) - 6

순서

1. 이미지 정보를 객체에 저장

2. RequestEntity 리턴

3. RequestMapping produces 속성 추가

4. AJAX success 속성 추가(뷰)

5. 테스트

1. 이미지 정보를 객체에 저장

이미지 한 개만을 처리하는 경우 AttachImageVO를 인스턴스화 하여 각 정보를 바로 담으면 됩니다.

 

하지만 제 프로젝트에서 업로드를 수행하는 URL 매핑 메서드의 경우 여러 개의 이미지 파일을 전달받고 처리할 수 있도록 설계되어 있습니다. 따라서 ArrayList 자료 구조를 활용했습니다.

 

for 문 밖 상단에 List 타입의 참조 변수를 선언하고 ArrayList 생성자로 초기화합니다.

/* 이미저 정보 담는 객체 */
List<AttachImageVO> list = new ArrayList();

for문 내부에 AttachImageVO 타입의 참조 변수를 선언하고 생성자로 초기화합니다.

/* 이미지 정보 객체 */
AttachImageVO vo = new AttachImageVO();

setter 메서드를 사용하여 각 정보를 AttachImageVO 객체에 저장합니다.

vo.setFileName(uploadFileName);
vo.setUploadPath(datePath);
vo.setUuid(uuid);

이미지 정보가 담긴 AttachImageVO 객체를 List 요소에 추가합니다.

list.add(vo);

이렇게 하면 이미지를 전달받은 만큼 AttachImageVO 객체가 생성되어 각 정보를 저장한 후 해당 객체가 List의 요소로 추가됩니다.

2. RequestEntity 리턴

업로드를 수행하는 URL 매핑 메서드의 리턴 타입을 아래와 같이 변경합니다.

구현부의 맨 아래에 ResponseEntity 참조 변수를 선언하고 생성자로 초기화합니다.

ResponseEntity<List<AttachImageVO>> result = new ResponseEntity<List<AttachImageVO>>(list, HttpStatus.OK);

위에서 작성한 생성자를 통해 HTTP의 Body에 추가될 데이터는 List <AttachImageVO>이고, 상태 코드가 OK(200)인 ResponseEntity 객체가 생성됩니다.

 

구현부 제일 하단엔 return 문을 추가하여 생성한 ResponseEntity 객체를 반환합니다.

 

이로써 이미지 업로드를 수행하는 URL 매핑 메서드가 완성됐습니다. 해당 메서드의 전체적인 과정은 다음과 같습니다.

1. 이미지 파일 저장
2. 썸네일 이미지 파일 생성 및 저장
3. 각 이미지 정보를 List 객체에 저장
4. ResponseEntity를 통해 뷰로 HTTP 상태 코드가 200이고 HTTP Body에 이미지 정보가 담긴 List 객체를 전송

3. RequestMapping produces 속성 추가

이미지 파일의 이름이 한글인 경우 업로드는 정상적으로 수행되겠지만, 뷰로 반환되는 이미지 정보의 파일 이름 데이터는 깨져 있을 수 있습니다.

 

이를 예방하기 위해 서버에서 뷰로 반환되는 데이터가 한글로 인코딩 되어야 합니다.

 

그래서 @RequestMapping 어노테이션에 produces 속성을 추가하여 전송되는 JSON 데이터가 UTF-8로 인코딩 되어 전송되도록 속성 값을 부여했습니다.

produces 속성

서버에서 뷰로 전송되는 Response의 Content-type을 제어할 수 있습니다.

 

업로드 URL 매핑 메서드의 @RequestMapping 어노테이션을 아래 같이 변경했습니다.

//기존
@PostMapping("/uploadAjaxAction")
    
// 변경 후
@PostMapping(value="/uploadAjaxAction", produces = MediaType.APPLICATION_JSON_UTF8_VALUE)

4. AJAX success 속성 추가(뷰)

뷰에서 서버에 전송한 이미지 정보를 전달받기 위해 기존 AJAX 코드에 success 속성을 추가했습니다.

 

success 속성 값으로 콜백 함수를 부여한 뒤 전달받은 객체 데이터를 console에 찍히도록 코드를 작성했습니다.

// 기존
$.ajax({
	url: '/admin/uploadAjaxAction',
	   processData : false,
	   contentType : false,
	   data : formData,
	   type : 'POST',
	   dataType : 'json'
});		
        
// 변경 후
$.ajax({
	url: '/admin/uploadAjaxAction',
	   processData : false,
	   contentType : false,
	   data : formData,
	   type : 'POST',
	   dataType : 'json',
	   success : function(result){
	    console.log(result);
	   }
});

5. 테스트

서버를 실행시켜 이미지를 업로드할 때 정상적으로 이미지 정보가 뷰로 반환되는지 확인합니다.