[request part] file upload

환경: springboot 2.7.3

implementation 'org.apache.poi:poi:5.2.2'
implementation 'org.apache.poi:poi-ooxml:5.2.2'
implementation 'commons-io:commons-io:2.11.0'  //확장자 검사

화면 -> 웹서버로 파일 업로드를 할 때,

• POST요청으로
• rest api 사용(form submit 아님)
• 파일(Multipartfile)과 본문 내용(RequestBody)을 동시에 보낼 경우 

 

@RequestPart 어노테이션을 사용하면 둘 다 한 요청으로 보낼 수 있다.

public BaseResponse sendFile(
    @Valid @RequestPart SendRequest request,
    @RequestPart MultipartFile csvFile)

 

다만 swagger(open-api)에서 테스트하는 경우 헤더 관련 에러가 나는데

아래와 같이 @Parameter 어노테이션으로 binary로 받겠다고 하고

@PostMapping(
    value = "/send-file",
    consumes = {MediaType.MULTIPART_FORM_DATA_VALUE, MediaType.APPLICATION_JSON_VALUE})
@Operation(summary = "우편물 발송 > 파일 업로드", description = "우편 작성 > 우편 발송 api")
public BaseResponse sendFile(
    @Valid @RequestPart @Parameter(schema = @Schema(type = "string", format = "binary"))
        SendRequest request,
    @RequestPart MultipartFile csvFile) {

스웨거에서 body부분을 json 파일로 만들어 첨부하면 된다.

---

+ 추가

만약 vue/js 화면 등에서 이 api를 호출하려면?

@RequestPart에 해당하는 값을 formData에 넣어서 보내야한다. 

또한 헤더에 multipart/form-data를 실어야 한다.

아래는 vue2+ts 예시

export const sendFile = (params: SendRequest, file: File): Promise<Response<void>> => {
  const body = new FormData();
  body.append(
    'request',
    new Blob([JSON.stringify(params)], {
      type: 'application/json',
    })
  );
  body.append('file', file);

  const axiosOptions: AxiosOptionsParam = {
    method: 'POST',
    url: '/api/mail/send-file',
    data: body,
    header: {
      'content-type': 'multipart/form-data',
    },
  };

  return http<void>(axiosOptions);
};