EAT PLACE (Spring) - 식당 등록 - MultipartRequest

이전 포스팅 이후 시간이 꽤 지났습니다.

프로젝트를 Model2 방식에서 Spring Boot Gradle 방식으로 수정하게 되고 추가 기능도 넣게 됐기 때문입니다.

프로젝트 구조를 변경하면서 파일 업로드를 하는 파트를 재분배하면서 가져오게 됬습니다.

다른 기능은 이전 방식에서 해봤지만 파일 업로드는 아직 해보지 않아서 호기심 반 , 기대감 반으로 가져왔습니다.

그러나 처음 해보니 쉽지 않았습니다. 강의에서 설명해주시고 검색을 통해 알아본 방식을 사용해도 한 번에 성공하진 못했으니까요.

 

식당 등록

본래 식당 등록은 사이트 관리자 권한으로 일방적으로 등록하게 설계했습니다.

그러나 프로젝트를 진행하면서 사이트 관리자가 식당을 일일이 등록하는데 한계가 있을 것이라는 피드백을 받았습니다.

따라서 식당 등록은 식당주(사업주)가 양식에 맞춰 신청을 하면 관리자가 확인한 후 승인하는 방식으로 변경했습니다

 

※ 식당 등록 정보

식당 등록 화면

 

식당 등록은 식당주가 직접 식당 정보를 등록하게 설정했습니다. @Valid를 사용해서 필수 입력 항목에 정보를 입력하게

설정했으며 파일 업로드는 MultipartRequest를 사용했습니다.

이미지 업로드에서 시안성을 위해서 onchange 이벤트를 사용해서 자바스크립트를 호출하고

JS로 이미지 태그의 src를 변경해 미리 보기를 구현했습니다.

 

[ 이미지 미리보기 Javascript code ]

<script>
	var openFile = function(event) {
		var input = event.target;
			
		var reader = new FileReader();
		reader.onload = function(){
			var dataURL = reader.result;
			var output = document.getElementById('output');
			output.src = dataURL;
		};
		reader.readAsDataURL(input.files[0]);
	};
</script>

 

[ Controller ]

@Autowired
BusinessService bs;
@Autowired
ServletContext context;
	
public ModelAndView insertNewRest(HttpServletRequest request) {
	
	ModelAndView mav = new ModelAndView();
	HttpSession session = request.getSession();
	BusinessVO bvo = (BusinessVO) session.getAttribute("loginBusiness");
	String businessId = bvo.getBusinessId();
	
	if(session.getAttribute("loginBusiness")==null){
		mav.setViewName("Member/login");
	}else {
		String path = context.getRealPath("images/RestImages");
		MultipartRequest multi;
		try {
			multi = new MultipartRequest(request, path, 5*1024*1024, 
            	"UTF-8", new DefaultFileRenamePolicy());
			String kind = multi.getParameter("kind");	
			
			/*이미지 파일 업데이트*/
			ImagesVO ivo = new ImagesVO();
			ivo.setRseq( rseq );
			ivo.setR_img(multi.getFilesystemName("r_img"));
			ivo.setM_img(multi.getFilesystemName("m_img"));
			ivo.setS_img(multi.getFilesystemName("s_img"));
			bs.insertImage(ivo);
			
			mav.setViewName("redirect:/myRestDetail?rseq=" + rseq);
		} catch (IOException e) {
			e.printStackTrace();
		}	
	} return mav;
}

 

파일 업로드 경로를 지정하는데 어려움을 겪었습니다.

처음에는 저장할 경로만 지정하면 되는 줄 알고 static 폴더에 있는 식당 사진 저장 폴더에 저장하려고 했습니다.

그러나 국비지원 강의를 복습하면서 잘못된 방법인 것을 잡아내고 webapp 폴더 하위에 static 하위 폴더 구조와 같이 

이미지 저장용 폴더를 구성하면서 그제야 정상적으로 업로드됐습니다. 

저장 경로가 달라져서 인지 jsp 파일에서 이미지를 불러오는 경로를 프로젝트 패키지 전체에 걸쳐서 수정하기도 했습니다.

 

파일 업로드 기능을 사용해보면서

 다행이라는 생각을 했습니다. 강의를 들으면서 선생님이 작성하는 파일업로드 코드들을 따라만 했었더라면,

파일 업로드를 위해 어떤 로직이 있고 흐름이 있는지 피상적으로만 알고 있었을 것이기 때문입니다.

물론 파일 업로드 기능에 대해 이해를 다 한건 아닙니다. 팀 프로젝트를 하면서 그리고 차트를 재분배하면서 

원래 했던 기능을 다시 하는 것도 완성도를 높이는데 도움이 됐겠지만 욕심을 내서 파일 업로드 파트를 

가져와서 저 자신에게 도움이 됐습니다.