1. nobody.png

2. 사진 업로드 그림 그리기

user/profile-form.mustache

{{> layout/header}}

<div class="container p-5">

    <!-- 요청을 하면 localhost:8080/login POST로 요청됨
    username=사용자입력값&password=사용자값 -->
    <div class="card">
        <div class="card-header"><b>프로필 사진을 등록해주세요</b></div>
        <div class="card-body d-flex justify-content-center">
            <img src="/nobody.png" width="200px" height="200px">
        </div>
        <div class="card-body">
            <form>
                <div class="mb-3">
                    <input type="file" class="form-control" name="profile">
                </div>
                <button type="submit" class="btn btn-primary form-control">사진변경</button>
            </form>
        </div>
    </div>
</div>

{{> layout/footer}}

3. UserController 코드 수정

@GetMapping("/api/user/profile-form")
public String profileForm(){
    return "user/profile-form";
}

4. header.mustache 수정

<li class="nav-item">
    <a class="nav-link" href="/api/user/profile-form">프로필</a>
		</li>

5. 화면 실행

6. 파일 처리 프로세스