[SpringBoot] Jquery로 서버에 파일 보내는 방법

개요

 이번에는 html에서 파일을 서버단에서 받아서 데이터를 처리하는 법을 설명할려고 한다.

웹 개발하면 file를 처리하는 경우가 많다. 예를 들어 게시글에 올릴때 첨부파일을 저장을 하면 클라이언트에서 서버단에 저장한다음 파일 처리후에 파일경로를 DB에 저장한다.

파일 처리하는 하는 방법중 대표적인 것은 서버컴에 파일 저장하는 폴더를 만들어서 파일원래 명과 UUID같은 Random 명을 생성해서 서버 Directory에 저장하거나 아니면 클라우드 AWS S3같은것을 이용해서 저장을한다. 하지만 이번에는 클라이언트에서 서버로 가져오는 방법을 설명할려고 한다. 

Js

 JQuery로 해서 ajax 보내는 방법은 여러가지가 있는데 그중 원하는 방식을 사용 하면된다.

1. FormData로 보내는 방법

 

<form id="detailForm" name="detailForm"  method="post" enctype="multipart/form-data">
	.
    .
    .
    <input  type = "file"  id = "IMG_FILE" name = "IMG_FILE" />
    .
    .
    .
<from>

 

 위 에 html 코드가 있다고 가정하자.

html 내용을 FormData로 변환한후 데이터를 서버단에 보내는 것이다.

 

var formData = new FormData($("#detailForm")[0]);
formData.append("IMG_FILE", $("#IMG_FILE")[0].files[0]);
url = 'saveFile.do'

 $.ajax({
    url: url
    ,type: 'POST'
    ,dataType: 'json'
    ,enctype: 'multipart/form-data'
    ,async: true
    ,processData: false
    ,contentType: false
    ,cache: false
    ,data: formData
    ,success: function (data) {
        alert("성공했습니다.");

    }
    ,exception: function (response) {
        alert(response.message);
    }
});

2.  html Form을 ajaxSubmit 로 보내는 방법

 html from 태그안에 input데이터를 ajaxSubmit으로 장성해서 보내는 것이다.

$("#detailForm").ajaxSubmit({
    url: "saveFile.do"
    , type: 'post'
    , dataType: 'json'
    , success: function (data) {
		aler("성공 했습니다.")
    }
    , exception: function (response) {
        alert(response.message);
    }
});

 

Spring

 서버쪽에 데이터를 받는 것인데 경우수가 3가지가 있다. 

 

1. 일반적인 경우

 아래와 같이 MultipartFile 클래스로 들고 오면된다. 서버에 파일 저장시에는 아래와 같이 convert 함수처럼 작성하면 된다.

@RequestMapping(value = "saveFile", method = RequestMethod.POST)
public Sting saveFile(@RequestParam(value = "IMG_FILE", required = false) MultipartFile multipartFile) throws IOException {
    ...
    File uploadFile = convert(multipartFile)  // 파일 변환할 수 없으면 에러
        .orElseThrow(() -> new IllegalArgumentException("error: MultipartFile -> File convert fail"));
    ...
    return "Success";
}
    
  private Optional<File> convert(MultipartFile file) throws IOException {
	
    File convertFile = new File(System.getProperty("${user.dir}") + "/" + file.getOriginalFilename());
    if (convertFile.createNewFile()) { // 바로 위에서 지정한 경로에 File이 생성됨 (경로가 잘못되었다면 생성 불가능)
        try (FileOutputStream fos = new FileOutputStream(convertFile)) { // FileOutputStream 데이터를 파일에 바이트 스트림으로 저장하기 위함
            fos.write(file.getBytes());
        }catch(Exception e) {

        }

        return Optional.of(convertFile);
    }
    return Optional.empty();
}

 

2. 2개 이상 파일을 개별적으로 들고 올때

 2개 이상 각 파일을 들고와서 개별적으로 처리가 필요할때는 requestParam Key값을 명시해서 작성하면된다.

@RequestMapping(value = "saveFile", method = RequestMethod.POST)
public Sting saveFile(@RequestParam(value = "IMG_FILE1", required = false) MultipartFile multipartFile1,
                        @RequestParam(value = "IMG_FILE2", required = false) MultipartFile multipartFile2) throws IOException {
    ...
    File uploadFile = convert(multipartFile)  // 파일 변환할 수 없으면 에러
        .orElseThrow(() -> new IllegalArgumentException("error: MultipartFile -> File convert fail"));
    ...
    return "Success";
}

 

3. N개 파일을 동시에 들고와서 처리할때

 예를 들어서 한 게시판에 첨부할 파일이 여러개이면 위와 같은 방식으로 작성할수가 없다. 그래서 List형태로 데이터로 받아서 처리를 해야 한다.

@RequestMapping(value = "saveFile", method = RequestMethod.POST)
public Sting saveFile( @RequestParam(value = "D_IMG_FILE", required = false) List<MultipartFile> multipartFileList) throws IOException {
    ...
    return "Success";
}

마무리

 이번에는 Jquery로 파일을 넘기는 방법과 Spring에서 보내파일을 가져오는 방법을 알아 보았다. 클라이언트나 서버에서 파일처리는 중요해서 파일 처리하는 방법도 공부해놓으면 현업에서 개발할때 유용하게 많이 사용될겉이다.