4. 댓글 이미지 집어넣기 : MultipartFile, formData

내가 정말 어려워했던 것이 멀티파트 파일이었다. 어떤 방식으로 멀티파트 이미지들을 DB에 저장할지 막막 했었다.

 

그런데 formdata를 알게 되었고, 그 방식을 사용하기로 하였다.

 

formdata란 말 그대로 form을 쉽게 보내도록 도와주는 객체이다.

 

 

자바스크립트에 uploadReplyImages 함수를 만든다. 이 함수는 멀티파트파일로 선택한 파일들을 fetch로 서버에 보내서 db에 저장하는 역할을 한다. 폼 데이터 객체를 만들고, for문으로 여러 파일들을 폼 데이터 객체 안에 넣는다. 이때 "replyImage"라고 이름을 설정한다. 그리고 "replyNo" 이름으로 지난 포스팅에서 추출한 댓글 고유 넘버 역시 폼 데이터 객체 안에 넣는다. 그리고 폼 데이터를 fetch로 서버에 전송한다.

 

 

 

먼저 컨트롤러에서 해당 파일을 저장할 주소를 문자열로 집어 넣는다.

 

컨트롤러에서 불러온 form 데이터들을 불러오는 방법, 

@RequestParam으로 자바스크립트에서 이름 지었던, 멀티파트 파일의 데이터 이름 "replyImage"를 불러온다.

MultipartHttpServletRequest를 이용하는 방법도 있다. 이 방법으로는 해당 댓글 넘버를 불러왔다 "replyNo"

 

파일 목록들을 for문으로 돌려서 파일의 이름들을 추출해보자...

getOriginalFilename() 함수를 이용하여 파일의 원래 이름들을 추출하였다.

 

 

맨 해당 for문이다. 여기서 UUID를 이용하여 랜덤 글자들을 생성한다. 왜 이걸 생성하냐면, 서버에 사용자가 업로드한 파일들을 해당 주소에 저장해 놓고, 그 저장해 놓은 이미지들을 화면에 나타나게 하는데, 이름들이 겹치는 오류를 방지하기 위해서이다.

 

만들어진 UUID와 원래 파일 이름을 합쳐서 위에 설정한 경로에 저장한다.

그리고 db에 데이터들을 저장하는데, replyImageVO 객체에 set문으로 추출한 해당 댓글 넘버랑, UUID 추가된 파일 이름과

원래 파일 이름과, 경로를 저장하여, DB에 보낸다.

 

 

 

 

게시물 쓰고 파일들을 선택해서 등록한 결과, 이렇게 db에 잘 저장되는걸 확인할 수 있다.

 

이제 뷰로 보여질 차례, 저번에 포스팅한 영화 평점 사이트에서 db에 저장된 이미지들을 불러오는 방식으로 진행

 

 

 

 

SAVE_PATH는 맨 저 위의 경로를 이용하였다. 파일이 저장된 곳에서 불러올 것이기 때문

 

 

 

 

 

일단 이걸 쓰기 전에 이미 해놓은게 있는데, 댓글을 화면에 보여지게 하는 createAllComment 함수의 insertAdjacentHtml 에서 해당 이미지가 보여질 곳에 히든 input을 만들어 클래스에 해당 댓글의 고유 넘버로 설정했다.

 

그래서 조회 시, 이미지 테이블의 replyNo 컬럼 값과 맞는 댓글을 불러와서 그 안에 이미지들을 집어넣게 하였다.

 

 

 

 

 

 

확인 결과 등록한 대로 잘 나온다.