02. 프로필 업로드 기능을 만들어 보자

이번에는 저기 저 이미지를 내 맘대로 변경할 수 있는 기능을 만들어 보겠다.

 

      <div class="mb-5"></div> <!-- 요소들 사이의 간격을 주기 위한 빈 div -->
      <div class="border p-2 mb-1">
        <h3>프로필 사진 변경</h3>
        <p>변경할 프로필 사진을 선택해주세요. (JPG, JPEG, PNG 파일만 업로드 가능합니다.)</p>
        <div class="mb-5"></div> <!-- 요소들 사이의 간격을 주기 위한 빈 div -->
        <div class="mb-3">
            <input class="form-control" type="file" id="photoUpload" name="photoUpload">
          </div>
      </div>

내 페이지 수정 페이지에 프로필 사진 변경 할 수 있는 form을 만들어 준다.

 

class UserEditForm(FlaskForm):
    photoUpload = FileField('사진 업로드', validators=[FileAllowed(['jpg', 'jpeg', 'png'])])

flask form에 이렇게 조건을 넣어서 만들어준다.

 

그다음 서버 쪽

 

photo = form.photoUpload.data
if photo :
    filename = 'profile'
    path = os.path.join(current_app.config['USER_PROFILE'],str(user.id),filename)
    os.makedirs(os.path.dirname(path), exist_ok=True)
    photo.save(path)

요렇게 파일을 저장해 준다.

테스트해보니까 잘 올라간다.

 

profile폴더에서 user.id값으로 폴더를 만들고 그 폴더 안에 profile.png로 파일을 저장한다.

이렇게 하면 나중에 프로필 사진을 바꿀 때 profile.png이름으로 덮어 씌우기 때문에 별 신경 안 써도 될 거 같다.

 

다음으로 저장한 파일을 유저가 불러올 수 있도록 해야 한다.

 

@bp.before_app_request
def load_logged_in_user():
    user_id = session.get('user_id')
    if user_id is None:
        g.user = None
    else:
        user_profile_path = os.path.join(current_app.config['USER_PROFILE'],str(user_id))
        if os.path.exists(user_profile_path) :
            g.user_profile_path = url_for('static', filename = "img/profile/{}/profile.png".format(user_id))
        else :
            g.user_profile_path = url_for('static', filename = "img/profile/default_profile.png")
        g.user = User.query.get(user_id)

 

어떻게 하지 고민하다가 g객체에다 유저의 프로필 path를 줘버렸다.

프로필 사진이 있다면 프로필 사진이 있는 path로, 없다면 기본 프로필 사진이 있는 path로 g.user_profile_path값을 줬다.

 

<a id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false" style="list-style: none">
    <img class="rounded-circle" src="{{ g.user_profile_path }}" alt="your-image-alt" width="40" height="40">
</a>

저렇게 사용하면 프로필 사진이 있는 곳에 다음과 같이 src값을 주면 된다.

 

적용이 잘 됐다.

 

---

다음에는 프로필 삭제 기능을 만들어야겠다.