[SW마에스트로] Base64로 인코딩된 사진 받아서 S3에 업로드하기

현재 개발자 사이드 프로젝트 팀 매칭을 하고
매칭한 팀끼리 멘토링 받을 수 있는 플랫폼을 제작하고 있습니다 

문제 상황

유저 프로필 사진, 팀의 썸네일 사진을 업로드 하기 위해서 사진 업로드, 삭제 기능을 만들어야 했다.

그래서 정석대로 MultipartFile로 사진 파일을 받아서 S3에 업로드를 하려고 했다,

하지만 MultipartFile은 프론트에서 Form 형식으로 보낼때만 받을수 있고 Json에 담아서 보낼순 없었다.

그렇다고 이미 Json으로 통신하도록 만들어진 프론트 코드를 변경하기엔 무리였다.

 

+ Json하고 MultipartFile를 같이 보낼수 있긴 하지만 결국 form으로 한번 감싸서

그 안에 Json과 MultipartFile을 넣어야 하는것이라서 프론트에서 번거롭기는 똑같았다.

 

https://leeggmin.tistory.com/7

[Spring] Multipartfile, Json 동시에 전송하는 방법 2가지

 

해결

그래서 고민 끝에 올려야 할 사진 파일을 Base64로 인코딩하여 Json에 String으로 담아서

요청을 보내면 백엔드에서 이를 file로 디코딩하여 S3에 저장하기로 하였다.

 

base64로 받아서 S3에 저장하는 메서드

 

fileService의 위 메서드에서 base64로 인코딩 된 String을 받아서 File로 바꾸고

S3에 저장하는 로직을 거친다.

 

1. 파일이름이 충돌 나면 안되므로 저장용 파일 이름을 UUID로 만든다.

 

2. * base64ToFile 메서드로 base64를 file로 만들어준다. (아래 추가 설명)

 

3. S3에 파일을 넣는다.

 

4. 파일을 만들면 로컬에 파일이 만들어지기 때문에 로컬에 있는 파일을 removeNewFile로 지워준다.

 

5. DB에 S3에 저장된 URL을 저장하기 위해 URL을 뽑아서 UploadFile DTO에 넣어준다. 

 

 * base64ToFile 매서드 추가 설명

base64에서 file 형식으로 바꾸는 메서드

 

1.  java.util의 디코더를 이용하여 base64를 디코딩하여 byte[] 형식으로 만든다.

 

2. outputStream을 열고 byte[]를 저장한 후 파일을 반환한다

 

 

 

+ base64 vs base64URL = 결론은 62번째, 63번째 인코딩 방식이 다르다. (삽질했다..)

https://babyprogram.tistory.com/50

base64 vs base64url safe 차이

 

 

+ 원래는 stream의 개념을 정확히 몰랐는데 구글링을 통해 배운 결과

정보의 흐름 이라고 간단하게 생각하게 되었다.

그리고 stream은 물줄기가 양쪽으로 움직일수 없듯이 한쪽 방향으로만 이동 할수 있는데

OutputStream은 출력용 stream이다. (코드에서 파일로 출력하는)

inputStream은 입력용 stream이다. (파일에서 코드로 입력하는, 코드 <--(입력)-- 파일)

 

+ 입출력이 헷갈렸는데 코드 기준으로 정보가 입력되는지 출력되는지로 생각하면 편했다.

그래서 위 메서드에서 빈 파일을 만들고 byte[]에 저장되어 있는 이미지를

file에 outputStream을 통해 적은것이다.