POST 입력 - 파일 업로드

form 태그에서 인코딩 방식을 특별히 지정하지 않는다면 기본적으로 POST 방식으로 "uid=newlec&name=dragon"처럼 &로 구분된 "키=값"이 전송된다. url에 사용되는 쿼리스트링과 같은 형식이다. 문자열만 보낼 때는 이러한 방식으로 보내도 되지만 바이너리 값을 보낼 때 문제가 생기므로 클라이언트에서 인코딩 방식을 달리해야 한다. (=>multipart)

 

 

 

 

multipart 방식을 사용하면 위 그림처럼 파트를 나누어서 전송하게 된다. (첫 번째 파트는 uid, 두 번째 파트는 name, 세 번째 파트는 file...)

 

클라이언트에서 값을 전송할 때의 기본 방식이 application/x-www-form-urlencoded 이라서 multipart 방식을 설정해야 하는 것처럼, 서버에서도 multipart 방식을 받기 위해서는 또 다른 설정이 필요하다.

 

 

servlet-context.xml

	<!-- 파일 업로드를 위한 multipart 설정 -->
	<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
		<!-- setting maximum upload size 300MB(1024-1024*300) -->
		<property name="maxUploadSize" value="314572800"></property>
	</bean>

 

서블릿 설정에 CommonsMultipartResolver를 추가한다.

 

(docs.spring.io/spring-framework/docs/current/javadoc-api/org/springframework/web/multipart/commons/CommonsFileUploadSupport.html)

 

 

- setMaxUploadSize : 전체 파일 사이즈의 최대 사이즈

- setMaxUploadSizePerFile : 업로드하는 파일 하나 당 최대 사이즈

- setDefaultEncoding은 하지 않아도 됨. (필터를 사용해 인코딩을 지정했기 때문)

 

 

1024byte=1KB 이고 1024byte*1024byte=1MB, 따라서 1024*1024*300은 300MB이다. 300MB를 최대 사이즈로 하기 위해 value에 314572800의 값을 넣었다.

 

 

reg1.html

<form action="reg" method="post" enctype="multipart/form-data">
<!-- 이하 생략 -->

 

form 태그에 enctype="multipart/form-data" 설정을 추가한다. (디폴트는 application/x-www-form-urlencoded)

 

 

NoticeController.java

	@RequestMapping("reg")
	@ResponseBody
	public String reg(String title, String content, MultipartFile file, String category, String[] foods, String food) {
		
		String fileName = file.getOriginalFilename();
		long fileSize = file.getSize();
		
		System.out.printf("fileName:%s, fileSize:%d\n", fileName, fileSize);
		
		for(String f : foods) {
			System.out.println(f);
		}
		
		return String.format("title:%s, content:%s<br>category:%s, food:%s", title, content, category, food);
	}

 

MultipartFile 타입으로 file을 받아온다.

- getOriginalFilename : 파일의 저장명.확장자 (ex. img1.png)

- getSize : 파일의 사이즈 (ex. 2881) => 바이트를 의미

 

 

pom.xml

	<!-- https://mvnrepository.com/artifact/commons-fileupload/commons-fileupload -->
	<dependency>
	    <groupId>commons-fileupload</groupId>
	    <artifactId>commons-fileupload</artifactId>
	    <version>1.4</version>
	</dependency>

 

commons-fileupload 디펜던시를 추가한다.

 

 

실행하고 뷰 페이지에서 파일을 첨부하여 submit 하면 파일 이름과 사이즈가 출력된다.

 

 

 

* 물리 경로 얻기와 파일 저장하기

 

 

 

 

전달받은 파일을 디렉토리에 저장하고자 할 때는 경로 디렉토리를 지정하고 그곳에 데이터를 저장하면 된다. 홈 디렉토리를 알아내서 해당 경로에 저장해야 하는데, 개발할 때의 경로와 개발 후 서버 배포했을 때의 경로가 다를 수 있다(개발 PC와 서버 PC가 다를 가능성이 매우 크기 때문). 따라서 파일 업로드와 저장 시에 경로를 동적으로 알아내는 작업이 필요하다.

 

 

 

 

ServletContext를 얻어서 절대 경로를 얻어낼 수도 있고, HttpServletRequest를 통해 절대 경로를 얻어낼 수도 있다. 경로를 얻어낸 후에는 파일 객체를 만들어서 전송하면 된다.

 

 

 

NoticeController.java

@Controller("adminNoticeController")
@RequestMapping("/admin/board/notice/")
public class NoticeController {
	
	@Autowired
	private ServletContext ctx;
	
	@RequestMapping("reg")
	@ResponseBody
	public String reg(String title, String content, MultipartFile file, String category, String[] foods, String food, HttpServletRequest request) {
		
		//파일 업로드
		String fileName = file.getOriginalFilename();
		long fileSize = file.getSize();
		System.out.printf("fileName:%s, fileSize:%d\n", fileName, fileSize);
		
		
		//webapp/static/upload 폴더 안에 파일을 저장할 것이다.
		//폴더의 절대경로(D:.....)를  쓰지 않고(개발pc와 운영서버pc의 경로가 일반적으로 다르기 때문)
		
//		ServletContext ctx = request.getServletContext(); //=>이렇게 해도 됨. 여기선 필드로 선언함.
		
		String webPath = "/static/upload";
		String realPath = ctx.getRealPath(webPath);
		System.out.printf("realPath: %s\n", realPath);
        
		File savePath = new File(realPath); //저장 경로인 realPath
        
		//업로드 하기 위한 경로가 없을 경우에는 그 경로를 직접 생성하게 함
		//exists() : 경로가 존재하는지 아닌지 반환(boolean)
		if(!savePath.exists()) {
			savePath.mkdirs(); //경로가 없다면, 디렉토리 생성
				/*
				mkdir : 맨 끝 경로 하나만 생성
				mkdirs : 중간 경로부터 없으면 전부 생성
				*/
		}
        
		realPath += File.separator + fileName; 
		//realPath 뒤에 역슬래시(\)가 붙고 파일 이름이 더해져야 하는데, 
		//윈도우가 아닌 경우에는 구분자가 역슬래시가 아닐 수 있음. 
		//separator는 현재 시스템에 맞게 구분자를 만들어주는 역할을 함
		
		File saveFile = new File(realPath); //파일 객체를 만든다. => 껍데기파일(경로+파일명)
		file.transferTo(saveFile); //업로드한 파일 데이터에 '경로+파일명' 껍데기를 입힌다.
	}
}

 

업로드한 파일을 저장할 upload 폴더를 static 폴더 안에 생성한다. 먼저 HttpServletRequest를 통해 절대 경로를 알아내기 위해 메소드에서 HttpServletRequest 객체를 얻어온다.

 

"/static/upload"를 web path로 지정하고, ServletContext의 getRealPath를 이용하면 그 경로를 통해 절대 경로 값을 얻어올 수 있다. ServletContext는 메소드 안에서 request를 이용해 받아올 수도 있지만 특히 전역적으로 사용한다면 필드에 선언하여 주입해도 된다. (이 경우 HttpServletRequest request 없어도 됨)

 

스프링은 ServletContext 객체를 IoC 컨테이너에 담아두고 있기 때문에 @Autowired를 이용해 꺼내 쓸 수 있다.

 

 

콘솔 출력값 (real path)

 

realPath: D:\....workspace\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\webprj\static\upload

 

워크스페이스의 .metadata 폴더 안에 실제 저장 경로가 생성되어 있다. 파일 업로드 시 이 경로에 파일을 저장하게 된다. 

 

realPath를 저장할 껍데기 파일 객체를 생성한다. (File savePath = new File(realPath);)

이 경로 폴더가 없을 때 발생되는 에러를 방지하기 위해서 경로가 있는지 검사 후에 없으면 디렉토리를 생성하게 하는 조건문을 거치게 한다.

 

그 후에는 realPath에 구분자(File.separator)와 파일명(fileName)을 더해 저장한다. 역슬래시를 추가하지 않고 separator를 사용하는 이유는, 윈도우가 아닌 경우에는 역슬래시가 아니라 슬래시를 사용하기 때문이다. separator를 사용하면 시스템 환경에 맞는 구분자를 넣어주는 역할을 한다.

 

그 후 경로+파일명이 더해진 realPath로 파일 객체를 생성하는데, 이는 껍데기 파일이라고 생각하면 된다. transferTo를 이용해서, form 파일에서 넘어온 데이터인 file에 껍데기를 입혀서 저장한다.

 

 

 

* 다중 파일 업로드

 

몇 가지 사항만 바꾸면 다중 파일 업로드를 간단히 구현할 수 있다.

 

reg1.html

<tr>
	<th>첨부파일</th>
	<td colspan="3" class="text-align-left text-indent"><input type="file" name="files" /> </td>
</tr>
<tr>
	<th>첨부파일</th>
	<td colspan="3" class="text-align-left text-indent"><input type="file" name="files" /> </td>
</tr>

 

input type="file"을 하나 더 추가하고, 다중 파일 업로드이므로 name을 files로 수정하였다. 같은 name으로 여러개의 값이 전달되면 배열로 받을 수 있다.

 

 

NoticeController.java

	@RequestMapping("reg")
	@ResponseBody
	public String reg(String title, String content, MultipartFile[] files, String category, String[] foods, String food/*, HttpServletRequest request*/) throws IllegalStateException, IOException {
		
		for(MultipartFile file : files) {
		
			String fileName = file.getOriginalFilename();
			long fileSize = file.getSize();
			System.out.printf("fileName:%s, fileSize:%d\n", fileName, fileSize);
						
			String webPath = "/static/upload";
			String realPath = ctx.getRealPath(webPath);
			System.out.printf("realPath: %s\n", realPath);
			
			File savePath = new File(realPath); 
	
			if(!savePath.exists()) { //경로가 없다면
				savePath.mkdirs(); //디렉토리 생성한다.
			}
			
			realPath += File.separator + fileName; //realPath 뒤에 역슬래시(\)가 붙고 파일 이름이 더해져야 하는데, 윈도우가 아닌 경우에는 구분자가 역슬래시가 아닐 수 있음. separator는 현재 시스템에 맞게 구분자를 만들어주는 역할을 함
			
			File saveFile = new File(realPath); //파일 객체를 만든다. (경로+파일명) => 껍데기 파일
			file.transferTo(saveFile); //업로드한 파일 데이터를 지정한 파일에 저장. 위에서 만든 껍데기 파일 saveFile을 입힌다.
		
		}
		return String.format("title:%s, content:%s<br>category:%s, food:%s", title, content, category, food);
	}

 

얻어오는 MultipartFile 객체를 배열로 바꾸고 변수명은 files으로 설정한다. (MultipartFile[] files)

여러 파일에 대해서 하나씩 저장할 수 있게 for each문을 사용한다.