[Spring] 섬네일 이미지 생성과 화면 처리

in Study on Spring, Web
[Spring] 섬네일 이미지 생성과 화면 처리

섬네일 이미지 생성과 화면 처리를 해봅시다.


목록 페이지에서 이미지를 보여줄 때 원본 이미지가 그대로 나오면 데이터를 많이 소비해야 합니다. 이를 위해 가능하면 섬네일을 만들어 전송해주고 원본을 볼 때 원본 파일을 보여주는 방식이 효과적입니다.


1. build.gradle - Thumbnailator 의존성 주입


1

섬네일을 처리하기 위한 Thumbnailator 라이브러리를 build.gradle 파일에 추가합니다.

2. UploadController - uploadFile() 수정


2

UploadController에서 net.coobird.Tuhmbnailator를 import 한 후 try ~ catch문의 내부에 섬네일을 생성하는 코드를 작성합니다.
생성된 섬네일은 기존의 파일명 앞에 ‘s_‘가 붙도록 작성합니다.

3. UploadResultDTO - getThumbnailURL() 작성


3

생성된 섬네일의 링크를 처리하기 위한 getThumbnailURL() 메소드를 작성합니다.

4. uploadEx.html - showUploadImage() 수정


4

기존 이미지가 아닌 섬네일이 보여지도록 수정합니다.

5. uploadEx.html - showUploadImage() 결과


5

브라우저에서 이미지 출력 확인 결과 정상적으로 섬네일이 보여지는 것을 확인할 수 있습니다.

6. UploadController - removeFile() 작성


6

업로드된 파일의 삭제를 위한 removeFile()을 작성합니다.
removeFile()은 파일의 경로와 UUID가 포함된 파일의 이름을 파라미터로 받아 삭제 결과를 T/F로 반환합니다. 이때 원본 파일과 함께 섬네일 파일도 같이 삭제해야 합니다.

7. uploadEx.html - removeBtn 작성


7

브라우저에서 파일을 삭제하기 위해 버튼을 추가합니다.
이미지를 출력할 때 remove 버튼도 함께 출력하도록 버튼과 이미지를 하나의 <div>로 묶습니다.

8. uploadEx.html - removeBtn function 작성


8

업로드 결과로 만들어지는 <div>는 동적으로 생성되기 때문에 바로 클릭 이벤트를 처리할 수 없으므로 위임하는 방식으로 이벤트를 처리해야 합니다.
삭제 작업은 POST 방식으로 호출하고 정상적으로 서버에서 원본 파일과 섬네일 파일이 삭제된 후에 화면에서 해당 이미지가 포함된 <div>를 삭제합니다.

9. uploadEx.html - showUploadImage() 결과


9

삭제 결과를 확인하기 위해 아무 이미지를 업로드합니다.

10. uploadEx.html - removeBtn 결과


10

해당 이미지의 remove 버튼을 누른 결과 정상적으로 이미지가 삭제되는 것을 확인할 수 있습니다.

© 2022. All rights reserved.