티스토리 뷰
이미지 등록 form
게시물을 등록할 때 첨부파일을 추가할 수 있도록 다음과 같이 작성합니다.
- form: enctype="multipart/form-data"
- input type: "file"
<form> 태그를 보면 enctype="multipart/form-data"를 사용하고 있습니다. form을 통해 보내는 데이터는 문자, 이미지 파일입니다. binary 값과 문자를 동시에 전송하기 위해서는 enctype을 추가해주어야 합니다.
Controller
form으로 전송된 binary와 문자값을 받기 위해서는 MultipartFile을 사용합니다. MultipartFile에는 업로드한 파일 이름, contentType, 서버에 파일 전송 등 다양한 기능을 제공합니다.
Service
Controller로부터 받은 MultipartFile을 사용하여 서버에 등록할 이미지를 생성해야 합니다.
1. 먼저 이미지를 저장할 서버 경로를 지정합니다.
@Value 애너테이션을 사용하여 파일을 저장할 경로를 지정합니다.
2. 서버에 이미지를 저장하기 위한 전처리 과정을 거칩니다.
사용자 A와 B가 "home.png"라는 이미지를 올린다면 서버에는 중복되는 파일이 저장되게 됩니다. 즉 1개의 파일만 저장되게 됩니다. 이를 방지하기 위해서 UUID를 통해 중복되지 않는 파일명을 생성하여 서버에 저장합니다.
MultipartFile을 사용하여 파일을 저장할 서버 경로 + UUID로 생성한 파일을 저장합니다.
multipart.transferTo()를 통해 서버에 파일이 정상적으로 등록되었습니다. 서버에 등록된 파일을 DB에도 등록을 하여 관리하기 위해서
(사용자가 업로드한 실제 파일명, UUID로 생성된 파일명) 필드를 갖는 UploadFile을 반환합니다.
3. DB에 저장
사용자가 게시물을 등록하면서 이미지를 등록하기 때문에 연관관계를 맺어줍니다.
FIle Entity 3개의 필드가 존재합니다.
- 사용자가 업로드 한 실제 파일명
- 중복을 방지하기위한 UUID로 생성한 파일명
- 서버에 이미지가 등록된 경로
세 개의 필드를 DB에 저장하여 관리합니다.
아래 사진을 통해 DB에서도 정상적으로 관리됨을 알 수 있습니다.
사용자 화면에는 실제 파일명을 보이도록 하면 됩니다.
이미지 다운
여기를 참고해주세요!