[Spring]파일 업로드

날짜:

cos.jar 를 사용하여 파일을 업로드 하는 방식은 2002년 이후로 개발이 종료되었기 때문에 보안 취약점 등의 문제로 사용을 지양할 필요가 있다.

외에 다른 업로드 적용 방식으로는

commons-fileupload

Servlet ver.3.0(자체적 처리)

위와 같은 방식이 있으며, 두 방식을 모두 사용하여 form 태그, Ajax 방식의 업로드 방식을 구현한다.


pom.xml 설정


- java-version : 1.8

- spring-framework-version : 5.0.7 RELEASE

- aspectj-version :  1.9.0

- slf4j-version : 1.7.25


lombok, javax.servlet 추가

- javax.servlet : 3.1.0

- lombok : 1.18.0


프로젝트에서 web.xml 을 이용하는 경우, web.xml 또한 아래와 같이 수정한다.

web.xml 수정사항

- id : WebApp_ID

- version : 3.1

- xsi :schemaLocation : http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd


- servlet 태그 내부에 multipart-config 태그와 옵션을 기입

servlet-context.xml 설정

- 첨부파일 처리용 Bean 객체 생성


※파일 업로드 : form 태그

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
 
    <form action="uploadFormAction" method="post" enctype="multipart/form-data">
        <input type='file' name='uploadFile' multiple>
        <button>Submit</button>
    </form>
 
</body>
</html>
 
cs
- 단순히 form 태그를 이용, 
※multiple : 해당 input 태그에 다수의 값을 적용 할 수 있음을 명시(default : true)

controller 파일
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
@Controller
@Log4j
public class UploadController {
 
    //업로드 Form 이동
    @GetMapping("/uploadForm")
    public void uploadForm() {
 
        log.info("upload form");
    }
 
    //업로드 처리용
    @PostMapping("/uploadFormAction")
    //muliple 옵션으로 여러 파일 값을 받은 경우, 해당 값들을 배열에 담아 처리
    public void uploadFormPost(MultipartFile[] uploadFile, Model model) {
        
        //업로드 저장 위치
        String uploadFolder = "c:\\upload";
        for (MultipartFile multipartFile : uploadFile) {
 
            log.info("-------------------------------------");
            log.info("Upload File Name: " + multipartFile.getOriginalFilename());
            log.info("Upload File Size: " + multipartFile.getSize());
            
            // File 객체 생성, 저장 위치, 저장 파일 이름 지정            
            File saveFile = new File(uploadFolder, multipartFile.getOriginalFilename());
            
            try {
                //MultipartFile.transferTo(File 객체) : File 객체에 해당하는 값으로 파일을 
                multipartFile.transferTo(saveFile);
            }catch (Exception e) {
                log.error(e.getMessage());
            }
            
        }
    }
    
 
}
 
cs
※cos.jar 와 다르게 별도로 전송이 필요함


Ajax 방식
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
@Controller
@Log4j
public class UploadController {
    
    @GetMapping("/uploadAjax")
    public void uploadAjax() {
        
        log.info("upload Ajax");
    }
    
    
    @PostMapping("/uploadAjaxAction")
    public void uploadAjaxPost(MultipartFile[] uploadFile) {
        log.info("uploadAjaxAction....");
        
        String uploadFolder = "c:\\upload";
        
        
        for (MultipartFile multipartFile : uploadFile) {
            log.info("-------------------------------------");
            log.info("Upload File Name: " + multipartFile.getOriginalFilename());
            log.info("Upload File Size: " + multipartFile.getSize());
            
            String uploadFileName = multipartFile.getOriginalFilename();
            
            //IE has file path
            uploadFileName = uploadFileName.substring(uploadFileName.lastIndexOf("\\")+1);
            log.info("only file name : "+uploadFileName);
 
            File saveFile = new File(uploadFolder, uploadFileName);
 
            try {
                multipartFile.transferTo(saveFile);                
            }catch (Exception e) {
                log.error(e.getMessage());
            }
            
        }
    }
    
 
}
 
cs
※ form 방식과 유사함


Ajax 처리 jsp
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <div id='uploadDiv'>
        <input type='file' name='uploadFile' multiple>
    </div>
    <button id='uploadBtn'>upload</button>
</body>
 
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
<script type="text/javascript">
 
$(document).ready(function(){
    
    $("#uploadBtn").on('click', function(e){
        // 전송을 위한 form 객체 생성
        var formData = new FormData();
        var inputFile=$("input[name='uploadFile']")
 
        //input 태그에서 수집한 파일들을 별도의 배열에 삽입
        var files = inputFile[0].files;
        console.log(files)
        
        //formData 객체에 file 데이터 
        for(var i =0; i<files.length; i++){        
            formData.append("uploadFile", files[i]);
        }
        
        //파일 전송용 Ajax
        $.ajax({
            url : '/uploadAjaxAction',
            processData : false,// formData 객체 전송 시 false로 설정
            contentType : false,// formData 객체 전송 시 false로 설정
            data : formData,
            type : 'POST',
            success : function(result){
                alert("uploaded");
            }
        })    
    })
})
</script>
 
</html>
cs

댓글

댓글 쓰기