02.06 국비학원 86일차 (게시글에 이미지 업로드)

• 게시글 작성 시 이미지 업로드 기능 추가하기

- 게시판에 업로드 할 수 있는 이미지의 수는 최대 3개
- 이미지의 크기는 1개당 5MB 를 초과하면 안됨
- 이미지는 /static/img/board/2023-02-06/이미지파일명.확장자 형식으로 저장
- 상세 페이지에 이미지를 출력하지 않아도 됨
- 상세 페이지에 업로드한 이미지를 다운로드 할 수 있도록 <a> 태그를 사용할 것

▷ DB 에 이미지 테이블 추가

▷ JSP (add)

이미지 3개까지만 선택할 수 있게 하는 함수 생성

▷ JSP (detail)

실제 저장 파일은 uuid 로 저장되나, 사용자가 다운로드 받을 때는 사용자가 저장한 이름으로 다운로드 하게 한다

▷ Servlet (AddController)

MultipartConfig 어노테이션 추가

이미지 경로를 /static/img/board/날짜/ 형식으로 만들기 위한 path 설정. 실제로 저장될 경로를 받아와 파일 생성

이미지를 여러개 업로드 할 수 있으니 collection 객체로 받아 저장한다. 조건에 맞는 파일만 realPath에 uuid 로 저장한다. 이를 반복하며 리스트에 추가

▷ Servlet (DetailController)

▷ DTO (BoardImageDTO 새로 생성)

+ getter/setter, toString 생성

▷ Service (BoardService)

기존 add 메서드에 이미지 추가하는 로직 생성

이미지를 가져와 리스트 객체로 반환하는 메서드

▷ DAO (BoardDAO)

▷ mapper (boardMapper)

 

▶ 완성된 게시글 작성 브라우저 확인

파일 선택 눌러 두개의 이미지 선택함

이미지 두개가 업로드 된 것 상세화면에서 확인 가능

상세페이지의 이미지 링크를 클릭하니 다운로드됨. 사용자에게 보여지는 것은 설정한 이름(dduru.jpg) 이나 실제로는 uuid 로 저장된 이미지 파일 경로 확인 가능

이미지가 다운로드됨

이미지 테이블에서 업로드한 파일들 확인 가능

realPath 경로에 들어가보면 생성된 폴더와 저장된 파일을 확인 할 수 있다

 

 

 

++몸이 안좋아서 조퇴하고 다음날에 집에서 해보려니 500 error (typeException)이 뜨고 실행이 되지 않았었다. 혹시 오타라도 있나싶어 눈빠지게 찾아봤지만 결국 해결 못하고 학원에 갔는데 선생님이 3초만에 해결해주셨다 ㅋㅎㅎ

서블릿에 @MultipartConfig 를 빼먹었던것...! 서블릿 객체가 multipart/form-data 형식의 요청 데이터를 처리할 수 있게 해주는 어노테이션이라 파일 업로드에선 반드시 필요한 부분인데 못보고 놓쳤나보닿.. 역시 이래서 수업은 빠지면 안된다 후