[javascript] axios multi form 데이터 처리

[소스 환경]

BackEnd : Spring boot, jdk17, Lombok

Front: Vue, Axios

 

BackEnd에서 파일을 수정하는 로직을 배열로 받아 처리하는 부분이 포함

Axios에서 Form을 배열로 전달해야하는 상황이 발생

@PutMapping(value = "[주소]",
        consumes = MediaType.MULTIPART_FORM_DATA_VALUE,
        produces = MediaType.APPLICATION_JSON_VALUE)
public SuccessResponse<List<Response>> [메소드명] (@PathVariable String id,
        @Valid @ModelAttribute Requests requests) {
    return new SuccessResponse<>(service.upsert(id, requests));
}

@Getter
@Setter
public class Request {
	private List<SubRequest> requests;
}

 

@Getter
@Setter
public class SubRequest {
	private String id;
	private List<MultipartFile> files;
}

 

일반적으로 Axios에서 파일을 전달하는 경우 아래와 같은 방식을 사용 (단일 처리)

async update(id, files) {
    const headers = { 'Content-Type': 'multipart/form-data' };
    const formData = new FormData();
    files.forEach((file) => {
      formData.append('files', file);
    });
    
    return await axios.put([주소], formData, headers);
  },

 

배열로 사용하는 경우에는 아래와 같은 처리가 필요 (다건 처리)

• formdata.append(`requests...`, value)에 requests는 백엔드에서 사용한 key명을 사용

async update(id, parameters) {
    const headers = { 'Content-Type': 'multipart/form-data' };
    
    const formData = new FormData();
    parameters.forEach((param, index) => {
      for (const [key, value] of Object.entries(param)) {
        if (value) formData.append(`requests[${index}].${key}`, value);
      }
    })
    
    return await axios.put([주소], formData, headers);
  },