15일차_게시판 프로젝트(8)

1. 파일첨부 기능 소개 

1-1. 파일 첨부와 관련하여 수정 부분 

1. save.html

• 글 작성 시, 파일 첨부

2. BoardDTo

• 첨부 파일 Data 전달

3. BoardService.save()

• 첨부 파일 확인
• 첨부 파일 저장 공간에 저장

4. BoardEntity

• 파일과 관련된 컬럼 추가

5. detail.html

• 상세페이지에 첨부 파일 있으면 보여주기

 

 

1-2. 파일 첨부와 관련하여 Class 추가 부분  

1. BoardFileEntity

2. BoardFileRepository

• DB에는 파일 자체를 저장하는 것이 아닌 파일명칭만 저장
• 파일 자체는 서버 안에 저장

 

 

1-3. 유튜브 영상

https://www.youtube.com/watch?v=Q584jyMQCL0&list=PLV9zd3otBRt7jmXvwCkmvJ8dH5tR_20c0&index=14

 

 

 

2. 파일첨부 요청 

2-1. 파일 선택 버튼 생성 

save.html

1. 파일을 첨부를 위해 input 태그의 type="file" 추가

-> 파일 선택 버튼이 생기고 해당 버튼 클릭 시, 탐색기를 통해 파일 첨부 가능  

2. enctype="multipart/form-data"

-> 실제 파일이 넘어가기 위해서 필요한 설정

 

 

2-2. 파일 데이터 저장을 위한 설정

BoardDTO.java

클라에서 전달한 데이터를 DTO 객체로 받기때문에 해당 클래스에 파일 관련 변수 초기화  

1. boardFile

• 용도 : save.html에서 Controller에게 전송한 첨부파일 담는 용도 
• 데이터 형식 : MultipartFile -> spring에서 제공하는 인터페이스로 파일을 쉽게 다룰 수 있도록 도와줌 
• save.html에서 name를 boardFile를 지정했기에 동일하게 설정
• 참고 : https://0rcticfox.tistory.com/entry/%EC%9E%90%EB%B0%94Java-Multipart-MultipartFile-File-%ED%8C%8C%EC%9D%BC-%EC%97%85%EB%A1%9C%EB%93%9C-%EA%B4%80%EB%A0%A8

 

2. originalFileName

• 용도 : 사용자가 첨부한 파일의 원본 파일명
• 데이터 형식 : String

 

3. storedFileName

• 용도 : 서버 저장용 파일명
• 데이터 형식 : String
• 사용자가 같은 파일명으로 첨부할 수 있기에 파일명을 만들어준다. 만약 해당 작업을 하지 않으면 동일한 이름의 다른 파일을 전달할 가능성이 있다. 

 

4. fileAttached

• 용도 : 파일 첨부 여부
• 데이터 형식 : int 
• 데이터 형식을 bool 값을 사용할 수도 있지만 bool값 사용 시, 처리할 부분이 많아서 int 사용 
• 파일 첨부할 경우 1, 없을 경우 0 저장 

 

 

2-3. 유튜브 영상

https://www.youtube.com/watch?v=YmYbS9Lly80&list=PLV9zd3otBRt7jmXvwCkmvJ8dH5tR_20c0&index=15

 

 

 

3. 첨부파일 로컬 저장 

3-1. Column 생성 

BoardEntity.java

1. fileAttached 컬럼 생성

2. toSaveEntity 메소드에 해당 컬럼 설정 

-> boardEntity.setFileAttached(0)

-> 첨부 파일이 없는 경우 설정 

 

 

3-2. 파일 로컬 저장 

BoardService.java

파일 첨부 여부에 따라 분기 처리

 

[ 첨부 파일 X ]

1. 객체 변환 : DTO -> Entity (setFileAttached= 0)

2. DB 에 data 저장 

 

[ 첨부 파일 O ]

1. DTO에 담긴 파일 추출

• 실제 파일 저장 
• MultipartFile 타입 사용 

2. 파일의 이름  추출
3. 서버 저장용 이름 생성

• 이름 : 내사진.jpg -> 8397980824_내사진.jpg)
• 이유 : 파일 명칭 중복 방지를 위해 기존 이름에 시간을 붙인다

4. 저장 경로 설정

• 실제 존재하는 경로로 설정해야 함. 

5. 해당 경로에 파일 저장

• 파일 저장 : boardFile.transferTo(new File(파일 전체경로));
• transferTo : MultipartFile가 사용할 수 있는 메소드로 해당 메소드를 통해 파일 저장

6. tb_Board 에 해당 데이터 save 처리 (-> 게시물 관련 Data)
7. tb_Board_File 에 해당 데이터 save 처리 (-> 첨부파일 관련 Data)

( 6,7은 다음 영상..! )

소스

 

저장된 화면

 

 

 

3-3. 유튜브 영상

https://www.youtube.com/watch?v=PsP5Jokyp6A&list=PLV9zd3otBRt7jmXvwCkmvJ8dH5tR_20c0&index=16