본문 바로가기
[ JAVA ]/JAVA Spring

[ Spring ] 파일 업로드 테스트 구현

by 환이s 2023. 4. 7.


프로젝트 구조

 

 

다음 포스팅에 상품 관리 페이지 구현을 하려고 합니다.

 

상품을 관리할 때 필요한 기능으로 업로드 기능은 필수라서 이전에 JSP로 파일 업로드 기능 구현을 했었는데 이번에는 Spring으로 기능 구현을 해보겠습니다.

 

프로젝트 흐름은 다음과 같습니다.

 

menu.jsp => UploadController.java= > uploadForm.jsp= > uploadResult.jsp

 


menu.jsp

 

이전 페이지에서 menu 페이지를 생성했습니다.

업로드 테스트 페이지로 이동할 수 있게 기능을 추가해서 Controller에 보내줍니다.

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
        <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
        <c:set var="path" value="${pageContext.request.contextPath }"/>   

<div style="text-align: center;">
 	<a href="${path }">Home</a> |
	<a href="${path}/memo/list.do">메모장</a> |
	<a href="${path}/upload/uploadForm">업로드 테스트</a> | <!-- 기능 추가 -->
	<a href="${path}/shop/product/list.do">상품 목록</a> |
	<div style="text-align: right;">
	<a href="${path}/member/login.do">로그인</a> |
	</div>
</div>
<hr>

UploadController.java

 

Controller에서는 menu.jsp 에서 보내준 .do 확장자를 받아서 세부적인 url 처리를 하고, 로깅 설정을 해 줍니다.

 

package com.example.spring.controller.upload;

import java.io.File;
import java.util.UUID;

import javax.annotation.Resource;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.util.FileCopyUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.servlet.ModelAndView;

@Controller
public class UploadController {
	// 로깅을 위한 코드
	private static final Logger logger = LoggerFactory.getLogger(UploadController.class);
	
	@Resource(name="uploadPath")
	String uploadPath;
	
	//업로드 폼 페이지로 이동
	@RequestMapping(value = "/upload/uploadForm", method = RequestMethod.GET)
	public String uploadForm() {
		return "upload/uploadForm";
	}
	
	//업로드된 내용을 처리
	@RequestMapping(value = "/upload/uploadForm" , method = RequestMethod.POST)
	public ModelAndView uploadForm(MultipartFile file, ModelAndView mav) throws Exception{
			String savedName = file.getOriginalFilename();
			savedName = uploadFile(savedName, file.getBytes());
			mav.setViewName("upload/uploadResult"); //포워딩
			mav.addObject("savedName", savedName); //전달할 데이터
			return mav;
			
	}

	 String uploadFile(String originalName, byte[] fileData) throws Exception {
		 // UUID = Universal Unique IDentifier , 범용 고유 식별자
		 // 중복된 파일이 올라갈 경우 서버에서 자동으로 다른 이름을 생성해 업로드 시킨다.
		UUID uid =UUID.randomUUID();
		String savedName = uid.toString()+"_"+originalName;
		
		// new File(디렉토리, 파일이름)
		File target= new File(uploadPath, savedName);
		//첨부파일을 임시 디렉토리에서 우리가 지정한 디렉토리로 복사
		FileCopyUtils.copy(fileData, target);

		return savedName;
	}
	
}

uploadForm

 

폼에서는 form 태그를 사용해서 업로드 버튼 클릭 시 Controller를 호출해서 기능 처리를 할 수 있게 해 줍니다.

 

<%@ 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>
<%@ include file="../include/header.jsp" %>
<style type="text/css">
iframe {
	width:  800px;
	height: 200px;
	border: 1px;
	border-style: solid;
}

</style>
</head>
<body>
<%@ include file="../include/menu.jsp" %>
<form action="${path }/upload/uploadForm" method="post" enctype="multipart/form-data" target="iframe1">
<input type="file" name="file">
<input type="submit" value="업로드">
</form>

<!-- 업로드 결과 출력 -->
<iframe name="iframe1"></iframe>

</body>
</html>

 

마지막으로 업로드 결과 출력 페이지를 생성합니다.


uploadResult.jsp

 

<%@ 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>
<%@ include file="../include/header.jsp" %>
</head>
<body>
파일이 업로드 되었습니다. <br>
파일명 : ${savedName }
</body>
</html>

출력

 

< menu.jsp >

 

 

< uploadForm.jsp >

 

 

< uploadResult.jsp >

 


마치며

 

오늘은 상품 기능 구현하기 전에 필요한 파일 업로드 기능에 대해서 알아봤습니다.

다음 포스팅에서 뵙겠습니다.

728x90