HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
🧚
[1기]최종 프로젝트 데브코스/
[팀12] 기부니🧡
[팀12] 기부니🧡/
🏷️
기술 정리 & 이슈 관리/
↔️
Frontend와 Multipart 통신 방법
↔️

Frontend와 Multipart 통신 방법

태그
일반적으로 정보를 api로 통신할때 프론트 쪽에서 application/json 타입으로 받는다.
그런데 게시물의 기본 정보와 이미지 파일을 같이 저장하게 하기위해서 프론트 쪽에서 어떻게 해야할까?
  1. 둘 다 form-data 로 보낸다.
      2. notion image
 
  1. 기본 정보는 json 타입, 이미지는 multipart/form-data 타입
    1. 첫번째 방법 : 기본 정보를 저장하는 api, 이미지를 저장하는 api로 두 개의 api
        2. → 기본 정보 저장 후 반환된 식별자 아이디 값으로 다시 이미지 저장하는 api 통신
    2. 두번째 방법 2 : 기본정보는 json 타입, 이미지는 multipart/form-data 로 지정해서 하나의 api로 통신
      3. Spring Boot | multipart/form-data 파일 업로드 ( + React , Axios, REST API, multiple files)
      클라이언트(React) 측에서 파일과 함께 JSON데이터를 전송해보기. 찾아보면 파일 하나만 전송하는 경우 예제는 많은데 JSON데이터와 함께 보내는 건 잘 없었다.. 거기다가 나는 모델 안에 오브젝트들을 다 넣어놔서 복잡한 형태였기 때문에 꼭 JSON형태로 한 번에 보내고 싶었음.. 어딘가에서 받아온 값을.. FormData에 담아준다. FormData에는 키와 값 쌍 으로 담아주어야 함.
      Spring Boot | multipart/form-data 파일 업로드 ( + React , Axios, REST API, multiple files)
      https://gaemi606.tistory.com/entry/Spring-Boot-multipartform-data-%ED%8C%8C%EC%9D%BC-%EC%97%85%EB%A1%9C%EB%93%9C-React-Axios-REST-API
      Spring Boot | multipart/form-data 파일 업로드 ( + React , Axios, REST API, multiple files)
      simpleBlog 개발 일지 (4)
      posts에 이미지를 포함시키기 위해서는 파일을 업로드하는 기능을 추가해야 합니다. 업로드할 파일을 고르는 기능을 구현하는 방법은 인터넷에 많이 나와있고, 간단해서 쉽게 할 수 있었습니다. 이번에 고민을 많이 했던 부분은 file을 어떤 방법으로 보내야 할까 생각을 많이 했습니다. 데이터를 보낼 때 JSON 포맷으로 보내고 싶은데 file은 JSON에...
      simpleBlog 개발 일지 (4)
      https://medium.com/jaehoon-techblog/simpleblog-%EA%B0%9C%EB%B0%9C-%EC%9D%BC%EC%A7%80-4-55a8d2a8604
      simpleBlog 개발 일지 (4)