SpringBoot 환경에서 Javascript FormData 로 image 파일 Upload

개발환경 : SpringBoot, Jquery

 

필요한 input 태그 데이터와 다중 이미지 파일을 업로드 해야하는데 에러상황이 많아 정리 겸 작성한다.

 

아래 이미지와 같이 String 형 데이터와 int 형 데이터, 다중 이미지 파일이 존재한다.

다중 이미지 파일은 아래와 같다.

 

이제 실제적으로 javascript 코드를 봐보자

Javascript(Jquery)

let formData = new FormData();

formData.append('b_title', 'oboTest');
formData.append('server_seq', 'oboTest2');
formData.append('b_content', 'oboTest3');

fileList.forEach((data, index) => {
    formData.append('file', data);
})

$.ajax({
    url: contextPath + "/boast/ins/submit",
    type: "POST",
    data: formData,
    processData: false,
    contentType: false,
    success: function(result) {

    }
})

 

let formData = new FormData();
formData.append('b_title', 'oboTest');
formData.append('server_seq', 'oboTest2');
formData.append('b_content', 'oboTest3');

Javascript(Jquery) Ajax를 보낼때 form 태그 데이터로 전송할 수 있게 FormData 객체를 사용한다.

 

FormData 의 메서드는 아래와 같다.

formData.append('b_title', 'oboTest');

위 append 메서드를 실행하게 되면 아래와 같다.<input type="text" name="b_title" value="oboTest"> 처럼 b_title이 name 속성, oboTest 는 value 값이 된다.

 

fileList.forEach((data, index) => {
    formData.append('file', data);
})

아래와 같은 File 형태의 List 를 formData에 "file" 이라는 name 속성으로 추가한다.

 

$.ajax({
    url: contextPath + "/boast/ins/submit",
    type: "POST",
    data: formData,
    processData: false,
    contentType: false,
    success: function(result) {

    }
})

위는 Jquery 의 Ajax 통신을 통해 input type text 데이터와 image 파일을 전송하는 multipartfile/form-data 형식이다.

 

processData 속성은 Query String 형태로 전송할 때 사용하는 속성이다.기본값은 True 이며 형태는 test=123&obo=456 형태로 넘어간다.Query String 형태로 넘기지 않기 위해 false 설정했다.

 

contentType 은 false 로 설정해야 브라우저 자체에서 Form Data 를 확인하고 자동으로 contentType을 설정한다.

 

 

Controller

Javascript 에서 Ajax를 통해 데이터를 넘기고 아래는 데이터를 받는 Controller 이다.

@PostMapping(value="/ins/submit")
@ResponseBody
public Integer boastInsertSubmit(
    @RequestParam("b_title") String b_title,
    @RequestParam("server_seq") Integer server_seq,
    @RequestParam("b_content") String b_content,
    @RequestParam("file") List<MultipartFile> fileList
) {
    int insertValue = 0;
    BoastEntity be = new BoastEntity();

    be.setCreate_name(CommonHandler.getAuthName());

    System.out.println("server_seq : "+server_seq);
    System.out.println("b_title : "+b_title);
    System.out.println("b_content : "+b_content);
    System.out.println("fileList : "+fileList.size());
    //insertValue = boastService.boastInsert(be);
    return insertValue;
}

 

결과는 아래와 같다.

fileList 의 배열 사이즈는 2개로 이미지 파일이 2개가 넘어왔다.