NestJS와 Vue를 이용하여 사용자의 프로필 이미지 업데이트하기 (+ AWS S3 Bucket)

백엔드 (NestJS)

프론트엔드 (VueJS)

진행 순서

input에서 파일이 업로드될 때 @change 이벤트가 실행되어 이미지 파일을 onPreviewImage()에 넘겨준다.
onPreviewImage()에서는 Web API의 readAsDatURL()을 사용한다. 이후 reader.result에 이미지의 토큰 값이 나온다.

미리보기

FileReader API를 활용하여 이미지 업로드 후 미리보기를 구현했다.

const onPreviewImage = async (event: any) => {
  if (event.target.files && event.target.files[0]) {
    const reader = new FileReader();

    reader.onload = (e: any) => {
      const previewImage: any = document.getElementById('img');
      previewImage.src = e.target.result;
    };

    reader.readAsDataURL(event.target.files[0]);
  }
};
  

"S3 Bucket 업로드 → Profile 전체 업데이트" 비동기적으로 일어나도록 구현

jekyll-rtd-theme

main