파일업로드

2024년 11월 14일

chantleman
작성자
2024.11.14.:08

파일업로드

1) method는 꼭 post

2) enctype="multipart/form-data"

3) <input type="file" name="uploadFile".. name속성이 꼭 있어야 함

4) <sec땡땡csrfInput />

5) action 속성의 uri 뒤에 token 추가

다중 파일 업로드일 때는 input 태그에 multiple 속성 추가하고, 조인(left outer join)과 resultMap 사용

pom.xml

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

<!-- 파일을 처리하기 위한 의존 라이브러리 -->
<!-- https://mvnrepository.com/artifact/commons-io/commons-io -->
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.11.0</version>
</dependency>

<!-- 썸네일 -->
<!-- https://mvnrepository.com/artifact/org.imgscalr/imgscalr-lib -->
<dependency>
<groupId>org.imgscalr</groupId>
<artifactId>imgscalr-lib</artifactId>
<version>4.2</version>
</dependency>

<!-- https://mvnrepository.com/artifact/net.coobird/thumbnailator -->
<dependency>
<groupId>net.coobird</groupId>
<artifactId>thumbnailator</artifactId>
<version>0.4.8</version>
</dependency>

예제

이미지 미리보기

<%@ page language="java" contentType="text/html; charset=UTF-8" %>
<!DOCTYPE html>
<html>
<body>
	<form action="/createPost" method="post">
			<p>제목 : <input type="text" name="title" required placeholder="제목" /></p>
			<p>카테고리 : <input type="text" name="category" requiredplaceholder="카테고리" /></p>
			<p>가격 : <input type="number" name="price" required placeholder="가격" /></p>
			<div class="form-group">
				<label for="uploadFile">파일 업로드</label>
				<div class="input-group">
					<div class="custom-file">
						<input type="file" class="custom-file-input" id="uploadFile" name="uploadFile" /> 
						<label class="custom-file-label" for="uploadFile">Choose file</label>
					</div>
				</div>
				<div id="divImage"></div>
			</div>
			<p>
				<input type="submit" value="저장" /> 
                <input type="button" value="목록" onclick="javascript:location.href='/list'" />
			</p>
		</form>
</body>
</html>

<script type="text/javascript">
	$(function(){
		$("#uploadFile").on("change",handleImg);
	})
	
	function handleImg(e){
		//이미지 오브젝트들
		let files = e.target.files;	
		
		//이미지오브젝트를 배열로
		let fileArr = Array.prototype.slice.call(files);
		
		//미리보기 영역 초기화
		$("#divImage").html("");
		
		fileArr.forEach(function(f){
			if(!f.type.match("image.*")){
				alert("이미지 확장만 가능합니다.");
				return ;
			}
			//이미지 읽기
			let reader = new FileReader();
			
			reader.onload = function(e){
				let img = `<img src= '\${e.target.result}' style="width:20%"/>`;
				//누적: append(), 새로고침: html()
				$("#divImage").append(img);
			}
			reader.readAsDataURL(f);			
		})
	}	
</script>

이렇게 하면 이미지 선택했을때 이미지 미리보기 할 수 있음

id가 uploadFile인 input태그에 multiple 속성 추가해주면 사진 여러개 선택 가능

이미지 저장하기

<form action="/createPost" method="post" enctype="multipart/form-data">

form 태그에 enctype multipart/form-data로 설정

↓ BookVO

@Data
public class BookVO {
	private int bookId;
	private String title;
	private String category;
	private int price;
	private Date insertDate;	
	private String search;
	private MultipartFile uploadFile;
}

vo에 uploadFile 객체 추가

↓ BookController

@RequestMapping(value="/createPost",method=RequestMethod.POST)
public ModelAndView createPost(BookVO bookVO) {
  int result = this.bookService.createPost(bookVO);
  ModelAndView mav = new ModelAndView();
  mav.setViewName("redirect:/create");
  return mav;
}

↓ BookServiceImpl

 @Override
public int createPost(BookVO bookVO) {
  int result = this.bookMapper.createPost(bookVO);

  //1. 파일 저장 경로 설정
  String uploadFolder = "C:\\sts4-4.26.0\\gjupload";

  //2. 연월일 폴더 생성
  //C:\\sts4-4.26.0\\gjupload + \\ + 2024\\11\14
  File uploadPath = new File(uploadFolder, getFolder());
  
  //만약 년/월/일 해당 폴더가 없다면 생성
  if(uploadPath.exists()==false) {
     uploadPath.mkdirs();
  }

  //3. 파일정보 추출
  MultipartFile uploadFile = bookVO.getUploadFile();
  //3-1. 파일명
  String fileName = uploadFile.getOriginalFilename();      
  //3-2. 파일 크기
  Long fileSize = uploadFile.getSize();      
  //3-3. 파일의 MIME 타입
  String fileMime = uploadFile.getContentType();

  //4.------------- 같은날 같은 이미지를 업로드 시 파일 중복 방지 시작 -------------
  //java.util.UUID => 랜덤값 생성
  UUID uuid = UUID.randomUUID();
  //원래의 파일 이름과 구분하기 위해 _를 붙임
  fileName = uuid.toString() + "_" + fileName;
  //------------- 같은날 같은 이미지를 업로드 시 파일 중복 방지 끝 -------------      

  //5. File 객체 설계(복사할 대상 경로 , 파일명)
  File saveFile = new File(uploadPath,fileName);

  //6. 파일 복사가 일어남
  try {
     //파일.transferTo(설계)
     uploadFile.transferTo(saveFile);
  }catch (IllegalStateException e) {
     log.error(e.getMessage());
  }catch (Exception e) {
     log.error(e.getMessage());
  }
  return result;
}


//년/월/일 폴더 생성
public static String getFolder() {
   //2024-11-14 형식(format) 지정
   SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");

   Date date = new Date();
   String str = sdf.format(date);

   //File.separator: 윈도우에서는 \\
   //2024-11-14  => 2024\\11\\14
   return str.replace("-", File.separator);
}

사진 선택하고 저장 버튼 누르면 오늘 날짜의 폴더로 사진이 들어간 것 확인

728x90

'spring' 카테고리의 다른 글

react, spring boot 연동 (0)	2024.11.26
websocket (0)	2024.11.18
@RequestParam, @RequestBody, @ResponseBody (6)	2024.11.12
spring 설치 및 초기 설정 (3)	2024.11.08
h2 DB (0)	2024.10.24

다음 글이 없습니다.

이전 글이 없습니다.

파일업로드

1) method는 꼭 post

2) enctype="multipart/form-data"

3) <input type="file" name="uploadFile".. name속성이 꼭 있어야 함

4) <sec땡땡csrfInput />

5) action 속성의 uri 뒤에 token 추가

다중 파일 업로드일 때는 input 태그에 multiple 속성 추가하고, 조인(left outer join)과 resultMap 사용

'spring' 카테고리의 다른 글

티스토리툴바