이미지 여러장 업로드 이슈 해결 과정
결론 부터 얘기하자면, 백엔드 최대 이미지 설정의 이유였습니다.
이 글은 이러한 이슈를 해결하기 위해 프론트엔드 개발자로써 어떤 부분을 테스트했는 지 공유하고자 올리는 글입니다.
배경
모바일 웹에서 이미지 여러장 보내는 기능을 구현했다. (최대 6장까지 가능)
하지만 PC 웹 환경에서와는 다르게 이슈가 있었다.
이미지 제한 조건
프론트엔드 : 5MB 이하
백엔드 : 5MB 이하
물론 프론트엔드에서 더 적은 파일 용량으로 이미지 압축을 진행할 수는 있었지만, 그래도 이 문제를 해결한 후 진행하기로 하고!
이유에 대해 찾아보았다.
프론트엔드 테스트 진행
우선 프론트엔드에서 이미지 사이즈를 어떻게 보내는지 알아야하는데..
모바일 환경에서 테스트하기 위해 개발자 모드를 키고
(크롬에서 모바일 디바이스 디버깅 하는 방법 - 모바일 개발자 모드 활성화)
Content-Length를 확인했다
약 18MB로, <= 제한조건 (25MB)에 못미쳤다.
다행히 프론트엔드에서는 문제가 없었고!
백엔드에 해당 사실을 알렸다.
추가 - 백엔드 조치
1. Nginx : client_max_body_size 확인
2. Spring :
- survlet.multipart.max-file.size : 각 파일 사이즈
- survlet.multipart.max-request-size : 전체 request 사이즈
추가 정리
1. 왜 웹 환경에서는 되고, 모바일 환경에서는 안될까?
> 이유는 테스트하는 사진의 사이즈 차이였다.
- 모바일 이미지 : 카메라로 찍은 이미지
- PC 이미지 : 모바일 이미지를 카톡으로 전송받은 이미지
사실 어떤 기기든 브라우저 환경이든 상관이 없는데 유독 모바일에서만 되지 않던 이유는 테스트 이미지였던 모바일 캠으로 찍은 사진이 고해상도이기 때문에 보통 4~MB 이상이였다.
이 사진을 카카오톡으로 전송해서 PC로 다운로드받았을 경우에는 보통 사이즈 압축돼서 1MB 이하로 오게되는데, 따라서 5MB 이하로 전송되게 되는 것이였다.
2. Content-Length란?
> Content-Length란 송되는 메시지 본문의 크기(바이트)를 나타낸다.
-