기록하고 공유하는 기술 블로그

Spring Boot와 Maria DB를 사용하여 클라이언트에서 넘어오는 이미지 데이터를 처리하는 방법을 알아보고자 한다.

방법은 다음과 같이 2가지이다.

1. binary 형식인 이미지 데이터를 base64로 인코딩하면여 json 형식으로 서버에 보내고 DB에 그대로 저장한다.

-> 이 방식을 사용하려면 클라이언트에서 이미지 데이터를 base64 형식으로 인코딩하여 백엔드에 전달해야 한다.

인코딩을 하면 매우 긴 문자열 형태로 데이터가 변환되기 때문에 이를 DB에 저장하기 위해서는 BLOB형태로 저장해야 한다.

이런식의 말도 안되게 긴 문자열을

위와 같은 Entity에

위와 같이 byte[]형식으로 변환하여 BLOB형태로 DB에 저장하고 꺼내야 하기 때문에 효율이 박살이 난다.

꺼내서 이미지로 사용할 때에도 base64 형태인 문자열을 디코딩하여 이미지로 변환해야 하기 때문에 효율이 더욱 낮아지게 된다.

<장점>

서버에 이미지를 저장할 필요가 없기 때문에 간편하다.

<단점>

그 외 모두

-> 효율이 너무 안좋고, 심지어 인코딩 시에 크기가 33% 정도 증가하므로 메모리 낭비 역시 심하다.

결론: 이미지를 DB에 바로 저장하는 방법 사용X

2. 이미지를 웹 서버의 특정 경로에 저장하고 DB에는 해당 경로만 저장한다.

대부분의 경우 이 방식으로 이미지를 포함한 여러 파일들을 업로드 한다고 보면 된다.

파일을 업로드 하면 로컬에 저장하고 그 경로를 DB에 저장하는 방식으로 구현했는데, 추후에는 AWS와 연동하여 이 작업을 수행할 예정이다.

<Service>

우선 위와 같이 InputStream으로 파일을 읽어오고 저장하는 메소드를 Service 계층의 FileService 클래스에 정의했다.

여기서 MultipartFile 요청은 큰 파일을 청크 단위로 쪼개서 효율적으로 파일을 업로드 할 수 있게 해주며, 스프링에서 제공하는 타입이다.

참고로 @Value 어노테이션은 yml 파일이나 properties파일에 접근하게 해주는 기능을 한다.

필자는 yml을 사용하기 때문에 위와 같이 정의했고, 이렇게 되면 uploadDir변수의 디폴트 값이 D:\Capstone\Image\가 된다.

<Controller>

Controller 부분은 위와 같이 구현했다.

내가 받아오고자 하는 파일은 USER 엔티티의 프로필 사진이기 때문에, 어떤 유저에게 등록할지를 알기 위해 PathVarible로 userId를 전달받도록 했다. 

넘어온 userId와 파일을 저장한 경로를 setImageDir메소드의 매개변수로 넘겨주면 해당 USER의 데이터베이스에 해당 경로가 저장된다.

이제 로직이 잘 돌아가는지 Postman으로 테스트해볼 차례이다. 

기본 세팅은 위와 같다. Header의 Content-Type에 아무것도 넣지 않아야 하며, Body는 form-data로 변경하고 KEY값은 Controller에서 지정한 @RequestParam의 이름과 같아야한다. VALUE는 file로 변경하고 시즈.png라는 이미지를 업로드 했다.

DB를 보면 해당 경로가 잘 들어간 것을 확인할 수 있다.

야호

Reference

velog.io/@byeol4001/Base-64%EC%99%80-base64-img-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

umanking.github.io/2020/01/02/spring-fileupload/

medium.com/@kwangsoo/multipartfil-upload-download-a236bb71093emedium.com/@kwangsoo/multipartfil-upload-download-a236bb71093e