POST로 파일, 이미지, JSON 데이터 보내기

백엔드 코드

특정 서비스에 사진파일 여러개( attaches ), PDF 파일 1개( report )와 정보( ServiceDTO.ReportUpload  )를 저장해야한다. 

API 호출시 참고할 백엔드 코드이다. 

POST 라는것과 어떤 타입으로 보내야할지 알 수 있다. 

@PostMapping("/services/{id}/upload")
public ResponseEntity<Void> uploadReport(@PathVariable(value = "id") Long id, 
                 @RequestPart ServiceDTO.ReportUpload request, 
                 @RequestPart(value = "report") MultipartFile report, 
                 @RequestPart(value = "attaches") MultipartFile[] attaches) throws IOException { 

 }



//ServiceDTO.java 파일로 이동해서 확인해보면 아래와 같다. 
@Getter
@NoArgsConstructor
@AllArgsConstructor
@Builder
public static class ReportUpload {
    private String date;
    private String time;
    private double degree;
    // 생략
}

@PathVariable 

API 호출시 Path(URL)에 포함되는 변수
URL에서 'id'라고 쓰여진 부분에 넣으면 된다. 

 

@RequestPart

multipart/form-data 형식에서 파일이나 폼 데이터를 받기 위해 사용
'report', 'attaches'는 파일 업로드 파라미터로 다뤄진다. 
MultipartFile(단일 파일), MultipartFile[] (다중 파일) 로 받는다는 뜻이다.

 

'request'라는 이름의 파라미터로 ServiceDTO.ReportUpload 객체 형태의 데이터를 받는다. 

ServiceDTO.ReportUpload 객체 내부의 특정 필수 데이터가 없거나 이름이 틀리거나, 타입(문자열로 보내야하는데 숫자로 보내거나) 이 틀리면 에러가 발생할 수 있다. 

백단 설정에 따라 자세한 에러메시지를 보내줄수도, 보내주지 않을수도 있기때문에 에러 메시지를 확인했을때 원인을 알수 없다면 API 개발 담당자가 로그를 확인해볼수 있도록 해야한다. 

 

 

프론트단 코드

화면에서 사용자가 입력한 데이터를 아래와 같이 모으고, API에 함께 보내면 된다. 

const serviceId = 99;
const uploadData = {
    date: '2024-11-08',
    time: '11:00',
    degree: 11,
}
const pdfFiles = {파일객체 한개}; // PDF 파일
const attacheFiles = [파일객체 여러개],  // 이미지 파일

// 폼데이터에 저장
const reportData =  new FormData();
reportData.append('request',  JSON.stringify(uploadData));
reportData.append('report', pdfFiles);
attacheFiles.forEach((file, index) => {
  reportData.append("attaches", file); 
});


// 업로드 API 호출 
axios.post(`/services/${serviceId}/upload`, reportData, {
  headers: {
    "Content-Type": "multipart/form-data",
  },
})
.then(response => {
  console.log("업로드 성공:", response);
})
.catch(error => {
  console.error("업로드 실패:", error);
});