반응형

오늘은 홈페이지에서 필수적인 파일 업로드이다

 

파일업로드는 커뮤니티 쇼핑몰.. 등등 모든 사이트에 다 들어가는 거같다.

안들어가는 사이트 있으면 알려주실뿐~~?? 😎

 

그래서 스프링이나 다른 언어를 공부할때 많은 라이브러리를 사용을 하는데

메이픈 레포지토리에서 다운 받을 수 있는 

Apache Commons FileUpload 

Apache Commons IO

 

이 2가지를 이용하여 파일 업로드를 구현을 해보자

 

시작🤩

 


 

1. 준비물 세팅

 

https://mvnrepository.com/

위 사이트에서 

 

Apache Commons FileUpload 

Apache Commons IO

 

2 가지를 코드를 카피한다.

 

참고로 

 

Apache Commons FileUpload 는 서블릿 3.0이상 부터 사용이 가능하다.

 

 

		<!-- 서블릿 3.0이상 사용 가능한 파일 업로드 api-->
		<dependency>
		    <groupId>commons-fileupload</groupId>
		    <artifactId>commons-fileupload</artifactId>
		    <version>1.3.1</version>
		</dependency>
		
		<!-- commons-io -->
		<dependency>
		    <groupId>commons-io</groupId>
		    <artifactId>commons-io</artifactId>
		    <version>2.4</version>
		</dependency>

 

레거시 프로젝트 pom.xml에서 넣어주고 꼭 메이븐 업데이트(alt + F5)

를 눌러서 꼬옥! 업데이트를 해주자

 

1-2 객체 등록 및 빈(Bean) 등록

 

Web-INF  > config(Spring) > Servlet-config(이름다를 수 있음!)

위 경로에 객체 및 빈 등록을 해주자 

 

<beans:bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
      
      <beans:property name="maxUploadSize" value="10485760" />
      <beans:property name="defaultEncoding" value="utf-8" />
   
   </beans:bean>

이렇게 빈등록을 해주자 

 

반드시 id를 multipartResolver로 선언

 

 

 최대 업로드 가능한 바이트 크기(바이트 단위), -1은 제한이 없음을 의미 -
      <beans:property name="maxUploadSize" value="10485760" />
      
       업로드 요청을 변환할 때 사용할 문자 인코딩 방식 
      <beans:property name="defaultEncoding" value="utf-8" />

 

이 두가지는 꼭 기억해주자 

 


2. 본격적인 코딩😋

 

2-1 JSP 

 

	<!-- 파일 업로드에서는 enctype(인코딩타입)을 multipart/form-data로 반드시 설정 -->
	<form action="upload_ok" method="post" enctype="multipart/form-data">
		파일 선택 : <input type="file" name="file">
		<input type="submit" value="전송">
	</form>
	
	<br><hr><br>
	
	<!-- 파일 두개이상 붙히는거 -->
	<form action="upload_ok2" method="post" enctype="multipart/form-data">
		파일 선택 : <input type="file" multiple="multiple" name="files"> 
		<input type="submit" value="전송">
	</form>

연습이기 떄문에 디자인은 생략한다

 

이때

🤓

중요한게 form태그안에 

enctype="multipart/form-data를 입력 해주어야한다.

 

참조 코딩의 시작 TCP School

 

2-1 Class VO 등 제작


import lombok.Getter;
import lombok.Setter;
import lombok.ToString;

@Getter
@Setter
@ToString
public class UploadVO {
	private String nmae;
	private MultipartFile file;
}

 

@Getter
@Setter
@ToString
public class MultiUploadVO {
	private List<UploadVO> list;
}

 

파일을 올릴때 한가지면 VO만 작성해도 되지만

2개 이상일 시는 LIst 타입으로 받아준다.

 

2-2 ConTroller 제작

 

//업로드로 가는 메소드
	@GetMapping("/upload")
	public void form() {}
	
	@PostMapping("/upload_ok")
	public String upload(@RequestParam("file") MultipartFile file) {
		String fileRealName = file.getOriginalFilename(); //파일명을 얻어낼 수 있는 메서드!
		long size = file.getSize(); //파일 사이즈
		
		System.out.println("파일명 : "  + fileRealName);
		System.out.println("용량크기(byte) : " + size);
		//서버에 저장할 파일이름 fileextension으로 .jsp이런식의  확장자 명을 구함
		String fileExtension = fileRealName.substring(fileRealName.lastIndexOf("."),fileRealName.length());
		String uploadFolder = "C:\\test\\upload";
		
		
		/*
		  파일 업로드시 파일명이 동일한 파일이 이미 존재할 수도 있고 사용자가 
		  업로드 하는 파일명이 언어 이외의 언어로 되어있을 수 있습니다. 
		  타인어를 지원하지 않는 환경에서는 정산 동작이 되지 않습니다.(리눅스가 대표적인 예시)
		  고유한 랜던 문자를 통해 db와 서버에 저장할 파일명을 새롭게 만들어 준다.
		 */
		
		UUID uuid = UUID.randomUUID();
		System.out.println(uuid.toString());
		String[] uuids = uuid.toString().split("-");
		
		String uniqueName = uuids[0];
		System.out.println("생성된 고유문자열" + uniqueName);
		System.out.println("확장자명" + fileExtension);
		
		
		
		// File saveFile = new File(uploadFolder+"\\"+fileRealName); uuid 적용 전
		
		File saveFile = new File(uploadFolder+"\\"+uniqueName + fileExtension);  // 적용 후
		try {
			file.transferTo(saveFile); // 실제 파일 저장메서드(filewriter 작업을 손쉽게 한방에 처리해준다.)
		} catch (IllegalStateException e) {
			e.printStackTrace();
		} catch (IOException e) {
			e.printStackTrace();
		}
		return "fileupload/upload_ok";
	}

우선 Jsp에서 파일의 name = file로 지정해주었기 떄문에 

@RequestParam("file")로 가져온다. 

 

다음에 getOriginalFilename()로 파일을 업로드하면서 업로드한 파일명을 얻어낸다.

그 후 size를 알고 싶으면 file size를 붙혀 알아낸다. 

여기서 int를 붙히지않는다 용량이 커질 수도 있기 떄문에 

int값을 못 받을 수 있다.

 

물론 int로 받고 빈등록에서 용량을 조절해도 된다 

 

이때 나는 지정한 fileRealName(가져온 파일의 이름)에 확장자를 얻고 싶다.

fileRealName에서 subString을 사용하여  파일명을 조각낸다.

그 후 indexof로 (.)을 지정한 뒤 fileRealName.length()로 하면

예를 들면 이미지 파일일 경우

xxx.jpg 의 jpg를 따오게 된다. 

그래서 fileExtension에는 확장자가 들어가 있다. 

 

String uploadFolde= "C:\\test\\upload";을 지정해 주고 

위에 경로와 동일한 폴더를 생성해준다. 

이곳으로 업로드한 파일을 보낼것이다

 

 

		UUID uuid = UUID.randomUUID();
		System.out.println(uuid.toString());
		String[] uuids = uuid.toString().split("-");
		
		String uniqueName = uuids[0];
		System.out.println("생성된 고유문자열" + uniqueName);
		System.out.println("확장자명" + fileExtension);

그리고 컨트롤러에 왠 UUID 일 수가 있는데

컴퓨터는 동일한 파일명을 저장할 수 없다. 

이렇게 UUID를 생성하여 랜덤한 파일명의 이름으로 저장해준다.

 

File saveFile = new File(uploadFolder+"\\"+uniqueName + fileExtension);  
		try {
			file.transferTo(saveFile); // 실제 파일 저장메서드(filewriter 작업을 손쉽게 한방에 처리해준다.)
		} catch (IllegalStateException e) {
			e.printStackTrace();
		} catch (IOException e) {
			e.printStackTrace();
		}
		return "fileupload/upload_ok";
	}

그리고 saveFile의 이름으로 아까 생성한 경로에 파일이 들어갈 수 있도록 생성해 준뒤

file.transferTo(saveFile);로 파일을 전송해준다. 

 

이때 파일전달에 예외를 던지고 있어 예외처리를 해준다. 

 


파일이 2개 이상 업로드 될 시🤡 

위의 경우는 1가지일 때이다.

 

 

VO는 동일하다.

 

 

 

Jsp 파일이 달라지게 되는데.

 

	<form action="upload_ok2" method="post" enctype="multipart/form-data">
		파일 선택 : <input type="file" multiple="multiple" name="files"> 
		<input type="submit" value="전송">
	</form>

 

 

multiple="multiple"을 써주게 되면

 

이렇게 바뀌게 된다🤓 

 

 

컨트롤러에서 추가된 부분을 찾아보자!

 

@PostMapping("/upload_ok2")
	public String upload2(MultipartHttpServletRequest files) {
		

		//서버에서 저장 할 경로
		String uploadFolder = "C:\\test\\upload";
		List<MultipartFile> list = files.getFiles("files");
		for(int i = 0; i<list.size(); i++) {
			String fileRealName = list.get(i).getOriginalFilename();
			long size = list.get(i).getSize();
			
			System.out.println("파일명 :" + fileRealName);
			System.out.println("사이즈" + size);
			
			File saveFile = new File(uploadFolder + "\\" + fileRealName);
			try {
				list.get(i).transferTo(saveFile);
			} catch (IllegalStateException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			} catch (IOException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}
	
		return "fileupload/upload_ok";
	}

기본적인 형식을 똑같으나.

MultipartHttpServletRequest : 다중파일을 받아 올 수 있다. 

 먼저 와 같이 서버에 저장할 경로를 지정해 준뒤 

List로 파일을 받아오자

List<MultipartFile> list = files.getFiles("files") 파일 여러개라 리스트로받고
반복문을 돌린다. 하나씩 뺴줘야하니까.

 

그 후 반복문 중간에 UUID를 넣어 중복을 막아주면 된다(선택사항)

 

 


3.동작확인

 

파일 등록 후 전송

 

잉 오류 떳다.... ㅇ ㅏ 뭐지 하다가

곰곰히 영문을 보니 아까 빈으로 등록했던 파일의 용량보다 커서 예외처리가 되었다.

그러면 적은 파일을 넣어보자.

 

 

드디어 성공 

자 이제 아까 확인용 println을 보자.

 

아주 잘 가져오는것을 확인 할 수 있다.

uuid로 임의로 변경된 이름으로 저장이 되었다.

 

성공 !!!!

 

 

이렇게 오늘은 파일 업로드를 알아 보았는데

나중에 현업으로 가면 많이 쓰일 것 같다

생각보다 어렵지 않아서 좋당

 

코딩을 배우시는분들 화이팅!!

 

 

 

주인장 Git : https://github.com/MoonSeokHyun

 

MoonSeokHyun - Overview

http://mls0000.dothome.co.kr/. MoonSeokHyun has 7 repositories available. Follow their code on GitHub.

github.com

그럼 이만 !

 

반응형

+ Recent posts