V10 -1 이미지 업로드와 프로필 화면

1단계 - 프로필 이미지 저장하는 기능 구현

---

application-dev.yml 파일에 추가

server:
  servlet:
    encoding:
      charset: utf-8
      force: true
  # 파일 업로드 설정
    multipart:
      enabled: true  # 파일 업로드 활성화
      max-file-size: 50MB  # 단일 파일 최대 크기 설정 (1MB)
      max-request-size: 100MB # 전체 요청(Request) 최대 크기 설정
  port: 8080

---

 

User 엔티티 컬럼 추가

    // User 테이블에는 이미지 파일명만 저장할 예정 (실제 데이터는 내 서버 컴퓨터 로컬에 저장할 예정)
    @Column(nullable =  true) // null 허용, 기본값
    private String profileImage;  // 프로필 이미지는 선택 사항(회원 가입 시)

---

 

join-form.mustache - MIME 타입 반드시 설정 (파일 전송 시)

{{> layout/header}}
<div class="container p-5 flex-grow-1">
    <div class="card">
        <div class="card-header"><b>회원가입을해주세요</b></div>
        <div class="card-body">
            <!--
                중요!!
                파일 업로드 사용시 method (POST)
                enctype 을 반드시 multipart/form-data 설정 해주어야 한다.
                설정을 안하면 파일 데이터를 서버측에서 받을 수 없음
                (form 태그 사용시 서버측으로 파일 데이터를 보내는 방법)

            -->
            <form action="/join" method="post" enctype="multipart/form-data">
                <div class="mb-3">
                    <input type="text" class="form-control" placeholder="enter username" name="username" value="ssar2">
                </div>
                <div class="mb-3">
                    <input type="password" class="form-control" placeholder="enter password" name="password" value="1234">
                </div>
                <div class="mb-3">
                    <input type="email" class="form-control" placeholder="enter email" name="email" value="aa@naver.com">
                </div>
                <!--  프로필 이미지 등록 필드(선택 사항)  -->
                <div class="mb-3">
                    <label for="profileImage" class="form-label">프로필 사진(선택사항)</label>
                    <input type="file" id="profileImage" class="form-control" name="profileImage" accept="image/*"  >
                    <small class="form-text text-muted">이미지 파일만 업로드 가능합니다(JPG, PNG, GIF 등)</small>
                    <small class="form-text text-muted d-block mt-1">⭐ 프로필 사진을 등록하지 않아도 회원 가입 가능⭐ </small>
                </div>
                
                <button type="submit" class="btn btn-primary form-control">회원가입</button>
            </form>
        </div>
    </div>
</div>
{{> layout/footer}}

---

 

UserRequest.JoinDTO - MultipartFile 타입 추가

MultipartFile : Spring 에서 제공해주고 있는 파일 업로드를 처리하기 위한 인터페이스이다

    // 회원가입 DTO
    @Data
    public static class JoinDTO {
        private String username;
        private String password;
        private String email;

        /**
         * 프로필 이미지 (선택 사항, null 이 될 수 있음)
         * MultipartFile : Spring 에서 제공해주고 있는 파일 업로드를 처리하기 위한 인터페이스이다.
         */
        private MultipartFile profileImage;

        // 편의 기능 추가 - 내가 가지고 있는 멤버 변수에 값으로 User 엔티를 생성
        public User toEntity() {
            return User.builder()
                    .username(username)
                    .password(password)
                    .email(email)
                    .build();
        }

        // 유효성 검사 메서드 만들기
        public void validate() {
            if (username == null || username.trim().isEmpty()) {
                throw new IllegalArgumentException("사용자명은 필수 입니다");
            }

            if(password == null || password.trim().isEmpty()) {
                throw new IllegalArgumentException("비밀번호는 필수 입니다");
            }

            if(email == null || email.trim().isEmpty()) {
                throw new IllegalArgumentException("이메일은 필수 입니다");
            }
            // 입력값 : abc@naver.com --> contains() -->   true   --> ! --> false
            if(email.contains("@") == false) {
                throw new IllegalArgumentException("올바른 이메일 형식이 아닙니다");
            }

        }

    }