SPRING - SPRING FRAMEWORK 3

최성현·2023년 10월 11일

Spring Spring Framework 3 Spring fileupload Spring 파일업로드 fileupload

SPRING FRAMEWORK 3

목록 보기

4/10

SpringMvcRead5

파일 업로드

pom.xml 설정

mvnrepository에서 commons io와 commons io 찾아서 dependencied안에 넣어준다

		<!-- add 파일 업로드 2개 -->
		
		<!-- commons-io -->
		<dependency>
		    <groupId>commons-io</groupId>
		    <artifactId>commons-io</artifactId>
		    <version>2.4</version>
		</dependency>
				
		<!-- commons-fileupload -->
		<dependency>
		    <groupId>commons-fileupload</groupId>
		    <artifactId>commons-fileupload</artifactId>
		    <version>1.3.1</version>
		</dependency>

servlet-context.xml 설정

class multipartresolver 자동완성해서 불러온 후 id 하면 자동완성

파일깨짐용 defaultEncoding
파일크기 설정 maxUploadSize

이 2가지를 설정해준다

	<!-- 위치 상관 x
		 file_upload setting
		 class multipartresolver 자동완성해서 불러온 후 id 하면 자동완성 -->
	<beans:bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
		<!-- encoding -->
		<beans:property name="defaultEncoding" value="utf-8"/>
		<!-- 파일크기 설정 3000000->3mb -->
		<beans:property name="maxUploadSize" value="3000000"/>
	</beans:bean>

ShopDto 설정

form에 설정한 name과 같은 이름으로 dto 설정(값을 한번에 불러오기 위해서)

package model.data.dto;

public class ShopDto {

	private String sang;
	private String color;
	private String price;
	private String image;
	
	public String getSang() {
		return sang;
	}
	public void setSang(String sang) {
		this.sang = sang;
	}
	public String getColor() {
		return color;
	}
	public void setColor(String color) {
		this.color = color;
	}
	public String getPrice() {
		return price;
	}
	public void setPrice(String price) {
		this.price = price;
	}
	public String getImage() {
		return image;
	}
	public void setImage(String image) {
		this.image = image;
	}
	
	
}

uploadForm1

업로드 폼 name

multipart controller에 이곳의 name="photo" 가져와야한다
파일 업로드시 mvnrepository에 들어가서 pom.xml depdencies에 라이브러리 추가해줘야함
servlet-context.xml에도 추가 엔코딩과 파일크기 설정을 해줘야함

			<tr>
				<th>업로드</th>
				<td>
					<!-- multipart controller에 이곳의 name="photo" 가져와야한다
						 파일 업로드시 mvnrepository에 들어가서 pom.xml depdencies에 라이브러리 추가해줘야함
						 servlet-context.xml에도 추가 엔코딩과 파일크기 설정을 해줘야함 -->
					<input type="file" name="photo" class="form-control">
				</td>
			</tr>

uploadForm1.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<title>Insert title here</title>
</head>
<body>
	<form action="upload1" method="post" enctype="multipart/form-data">
		<table class="table table-bordered" style="width: 400px;">
			<caption align="top"><b>스프링 업로드(파일 1개)</b></caption>
			<tr>
				<th>제목</th>
				<td>
					<input type="text" name="title" class="form-control">
				</td>
			</tr>
			
			<tr>
				<th>업로드</th>
				<td>
					<!-- multipart controller에 이곳의 name="photo" 가져와야한다
						 파일 업로드시 mvnrepository에 들어가서 pom.xml depdencies에 라이브러리 추가해줘야함
						 servlet-context.xml에도 추가 엔코딩과 파일크기 설정을 해줘야함 -->
					<input type="file" name="photo" class="form-control">
				</td>
			</tr>
			
			<tr>
				<td colspan="2" align="center">
					<button type="submit" class="btn btn-success">업로드</button>
				</td>
			</tr>
		</table>
	</form>
</body>
</html>

NaverController

업로드 폼 이동

	@GetMapping("/form4")
	public String form4()
	{
		return "upload/uploadForm1";
	}

파라메터 값 설정

먼저 @PostMapping("/upload1")으로 mapping설정

form에서 가져온 @RequestParam MultipartFile photo
실제 경로를 구하기 위해 불러온 HttpSession session

	//form에서 가져온 @RequestParam MultipartFile photo
	//실제 경로를 구하기 위해 불러온 HttpSession session
	@PostMapping("/upload1")
	public ModelAndView read1(
			@RequestParam String title,
			@RequestParam MultipartFile photo,
			HttpSession session)

업로드할 실제경로 구하기

		//업로드할 실제경로구하기
		String path=session.getServletContext().getRealPath("/WEB-INF/image");

업로드된 파일명 변수화

어떤 사진이 담길 것인지 설정

		//어떤 사진이 담길지
		String fileName=photo.getOriginalFilename(); // 업로드된 파일명

같은 이름 파일 구분용 SimpleDateFormat 생성

현재날짜와 시간 이용해서 파일명에 저장... 이렇게 되면 파일 저장 시간도 나오기때문에 겹칠일이 절대 없다

		SimpleDateFormat sdf=new SimpleDateFormat("yyyymmddHHss");

파일업로드가 빈 값이 아닐 때(파일 업로드할 때)

		if(!fileName.equals(""))
		{
			//동일한 파일 이름 앞에 실제 올린 시간을 추가해준다... ex)2023101110(분)55(초)
			fileName=sdf.format(new Date())+"_"+fileName;
			
			
			//path에 업로드
			try {
				// 맥은 "/" 윈도우는 "\\"
				photo.transferTo(new File(path+"/"+fileName));
			} catch (IllegalStateException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			} catch (IOException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}

동일한 파일 이름 앞에 실제 올린 시간을 추가해준다... ex)2023101110(분)55(초)
파일 중복 제거용
```
fileName=sdf.format(new Date())+"_"+fileName;
```
path에 업로드
맥은 "/" 윈도우는 "\"
```
photo.transferTo(new File(path+"/"+fileName));
```
실제 저장되는 곳(가상폴더)에 파일을 생성해서 올려주는 것

파일이 없을 경우 출력될 것

업로드안할경우 no라고 안하면 나중에 db에 빈 문자열로 들어가기 때문에

	else
	{
		fileName="no"; //업로드안할경우 no라고 안하면 나중에 db에 빈 문자열로 들어가기 때문에 no라고 지어줌
	}

설정한 값들 저장하기

	model.addObject("fileName", fileName);
	model.addObject("title", title);
	model.addObject("path", path);

실제 경로 저장

	model.setViewName("upload/uploadResult1");

NaverController.java

	@GetMapping("/form4")
	public String form4()
	{
		return "upload/uploadForm1";
	}
	
	
	
	//form에서 가져온 @RequestParam MultipartFile photo
	//실제 경로를 구하기 위해 불러온 HttpSession session
	@PostMapping("/upload1")
	public ModelAndView read1(
			@RequestParam String title,
			@RequestParam MultipartFile photo,
			HttpSession session)
	{
		ModelAndView model=new ModelAndView();
		
		//업로드할 실제경로구하기
		String path=session.getServletContext().getRealPath("/WEB-INF/image");
		//어떤 사진이 담길지
		String fileName=photo.getOriginalFilename(); // 업로드된 파일명
		
		
		//현재날짜와 시간 이용해서 파일명에 저장... 이렇게 되면 파일 저장 시간도 나오기때문에 겹칠일이 절대 없다
		SimpleDateFormat sdf=new SimpleDateFormat("yyyymmddHHss");
		
		
		if(!fileName.equals(""))
		{
			//동일한 파일 이름 앞에 실제 올린 시간을 추가해준다... ex)2023101110(분)55(초)
			fileName=sdf.format(new Date())+"_"+fileName;
			
			
			//path에 업로드
			try {
				// 맥은 "/" 윈도우는 "\\"
				photo.transferTo(new File(path+"/"+fileName));
			} catch (IllegalStateException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			} catch (IOException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}
		else
		{
			fileName="no"; //업로드안할경우 no라고 안하면 나중에 db에 빈 문자열로 들어가기 때문에 no라고 지어줌
		}
		
		model.addObject("fileName", fileName);
		model.addObject("title", title);
		model.addObject("path", path);
		
		model.setViewName("upload/uploadResult1");
		
		return model;
	}

여러 파일 업로드

uploadForm2

multipart controller에서 name="photo" 가져와야한다
파일 업로드시 mvnrepository에 들어가서 pom.xml depdencies에 라이브러리 추가해줘야함
servlet-context.xml에도 추가 엔코딩과 파일크기 설정을 해줘야함

여러개 사진은 multiple="multiple" 추가하면됨

			<tr>
				<th>업로드</th>
				<td>
					<!-- multipart controller에서 name="photo" 가져와야한다
						 파일 업로드시 mvnrepository에 들어가서 pom.xml depdencies에 라이브러리 추가해줘야함
						 servlet-context.xml에도 추가 엔코딩과 파일크기 설정을 해줘야함
						 여러개 사진은 multiple="multiple" 추가하면됨 -->
					<input type="file" name="photo" class="form-control" multiple="multiple">
				</td>
			</tr>

uploadForm2.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<title>Insert title here</title>
</head>
<body>
	<form action="upload2" method="post" enctype="multipart/form-data">
		<table class="table table-bordered" style="width: 400px;">
			<caption align="top"><b>스프링 업로드(파일 여러개)</b></caption>
			<tr>
				<th>제목</th>
				<td>
					<input type="text" name="title" class="form-control">
				</td>
			</tr>
			
			<tr>
				<th>업로드</th>
				<td>
					<!-- multipart controller에서 name="photo" 가져와야한다
						 파일 업로드시 mvnrepository에 들어가서 pom.xml depdencies에 라이브러리 추가해줘야함
						 servlet-context.xml에도 추가 엔코딩과 파일크기 설정을 해줘야함
						 여러개 사진은 multiple="multiple" 추가하면됨 -->
					<input type="file" name="photo" class="form-control" multiple="multiple">
				</td>
			</tr>
			
			<tr>
				<td colspan="2" align="center">
					<button type="submit" class="btn btn-success">업로드#2</button>
				</td>
			</tr>
		</table>
	</form>
</body>
</html>

NaverController

여러개 업로드하는 폼 으로 이동

	@GetMapping("/uploadform5")
	public String form5()
	{
		return "upload/uploadForm2";
	}

파라메터 값 설정

여러개 업로드해서 2번 결과창으로 이동
여러개 파일 업로드는

 @RequestParam ArrayList<MultipartFile> photo

이렇게 바뀜

	@PostMapping("/upload2")
	public ModelAndView read2(
			@RequestParam String title,
			@RequestParam ArrayList<MultipartFile> photo,
			HttpSession session)

ArrayList 생성

여러 파일을 담을 ArrayList 생성

		ArrayList<String> files=new ArrayList<String>();

for(MultipartFile f:photo)

파일명 담기...여러개의 파일이기때문에 for each로 MultipartFile f에 form에서 가져온 photo를 1개씩 여러개 담아줌

		for(MultipartFile f:photo)
		{
			String fileName=sdf.format(new Date())+"_"+f.getOriginalFilename();
			files.add(fileName);
			
			//실제 업로드 transferTo
			try {
				f.transferTo(new File(path+"/"+fileName));
			} catch (IllegalStateException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			} catch (IOException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}

NaverController.java

	//여러개 업로드하는 폼 으로 이동
	@GetMapping("/uploadform5")
	public String form5()
	{
		return "upload/uploadForm2";
	}
	
	//여러개 업로드해서 2번 결과창으로 이동
	//여러개 파일 업로드는 @RequestParam ArrayList<MultipartFile> photo 이렇게 바뀜 
	@PostMapping("/upload2")
	public ModelAndView read2(
			@RequestParam String title,
			@RequestParam ArrayList<MultipartFile> photo,
			HttpSession session)
	{
		ModelAndView model=new ModelAndView();
		
		//업로드할 실제경로구하기
		String path=session.getServletContext().getRealPath("/WEB-INF/image");
		
		//현재날짜와 시간 이용해서 파일명에 저장... 이렇게 되면 파일 저장 시간도 나오기때문에 겹칠일이 절대 없다
		SimpleDateFormat sdf=new SimpleDateFormat("yyyymmddHHss");
		
		//여러 파일을 담을 ArrayList 생성
		ArrayList<String> files=new ArrayList<String>();
		
		//파일명 담기...여러개의 파일이기때문에 for each로 MultipartFile f에 form에서 가져온 photo를 1개씩 여러개 담아줌
		for(MultipartFile f:photo)
		{
			String fileName=sdf.format(new Date())+"_"+f.getOriginalFilename();
			files.add(fileName);
			
			//실제 업로드 transferTo
			try {
				f.transferTo(new File(path+"/"+fileName));
			} catch (IllegalStateException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			} catch (IOException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}
		
		model.addObject("files", files);
		model.addObject("title", title);
		model.addObject("path", path);
		
		model.setViewName("upload/uploadResult2");
		
		return model;
	}

최성현

백엔드 개발자로서 성장해 나가는 성현이의 블로그~

이전 포스트