5. 이미지파일 base64 저장 시 PayloadTooLargeError: request entity too large 에러 해결
1) 문제점
이전에 작성한 에디터를 사용하여 이미지 파일을 붙여넣기 후 저장할 때, 이미지 파일이 Base64로 인코딩되어 저장됩니다.
문제는 이미지 파일이 커질수록 Base64 인코딩 데이터의 크기가 커져, 저장 시 PayloadTooLargeError: request entity too large 에러가 발생한다는 점입니다.
이는 사이즈가 너무 큰 데이터를 요청(Request)할 때 발생하는 에러입니다.
2) 해결방안
위 에러를 해결하기 위해 구글링을 하였으나, 대부분의 해결 방법은 처리 용량을 늘리라는 내용이었습니다.
이는 근본적인 해결책이 아니어서, 다른 접근 방식을 시도하였습니다.
해결 방법: 이미지 첨부 시, 구글 클라우드 스토리지에 이미지를 저장하고, 이미지 URL을 변환하여 저장하는 방식으로 문제를 해결했습니다.
게시물을 수정할 때는 기존 이미지를 삭제하고, 새로운 이미지를 업로드하여 URL을 불러와 DB에 저장하도록 처리했습니다.
만약 게시물이 수정된다면, 기존의 이미지 삭제 처리 후 새로운 이미지를 업로드-> 업로드된 이미지 URL 불러오기 -> DB 저장 방식으로 처리하였습니다.
구현소스
소스 설명하자면, 게시물저장 버튼 처리 시 위 함수가 호출
if문은 새 글 입력(주황색 박스) 기존 게시글수정(빨간색 박스) 입니다.
새 글 입력의 경우 이미지파일 업로드 처리 후 저장. 게시글 수정의 경우 이미지파일 삭제 후 이미지파일 업로드 저장 처리가 됩니다.
fileStatupdate처리
먼저 fileStatUpdate 처리입니다. 기존에 이미지가 있다면 파일데이터를 관리하는 테이블에서 해당 이미지 파일의 상태값을 Y로 처리해 줍니다.
(Y처리 된 이미지데이터는 삭제할 예정입니다.)
upload01
제일 중요한 함수입니다. 긴 파일의 url을 정해진 사이즈로 잘라서 받습니다. (한 번에 큰사이즈의 파라미터를 백엔드서버에 통신 시 에러발생됩니다.)
아래 백엔드처리입니다.
굉장히 깁니다.. 너무 복잡하게 짠 거 같아 부끄러운데, 우선 간략히 설명드리면 프론트에서 잘라서 보내준 html을 루프문을 돌면서 합친 후 잘라서 전송한 html이 마지막 유무를 체크해줘야 합니다.
마지막 html 조각이라면 이제 로직이 시작되는데, html에 img태그가 있는지 체크 후, 있다면 구글 스토리지에 img파일을 업로드 해줍니다.
구글 스토리지에 업로드 후 DB에도 해당 데이터를 Insert를 시켜준 후 이전에 update했던 img_stat값이 Y인 데이터를 삭제 처리로 끝납니다.
갑자기 발생하는 오류는 언제나 당황스럽습니다. 같은 문제로 찾고 계시던 분들이 이 내용을 보고 해결할 수 있었으면 좋겠습니다.
궁금하신 점은 댓글로 남겨주세요. 읽어주셔서 감사합니다.
이 포스팅이 도움이 되었다면, 다른 분들에게도 공유해주세요. 앞으로도 유익한 정보를 제공하기 위해 노력하겠습니다. 감사합니다.