코드로 배우는 스프링 웹 프로젝트-22. 파일 업로드 상세 처리
코드로 배우는 스프링 웹 프로젝트 - 개정판
2019년 7월 10일 인쇄판
Part6. 파일 업로드 처리
Chapter 22. 파일 업로드 상세 처리
.
22.1 파일의 확장자나 크기의 사전 처리
예제는 첨부파일 확장자가 exe, sh, zip이면 업로드를 제한하고 특정 크기 이상의 파일은 업로드할 수 없도록 한다.
uploadAjax.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>
</head>
<body>
<h1>Upload with Ajax</h1>
<div class='uploadDiv'>
<input type='file' name='uploadFile' multiple>
</div>
<button id='uploadBtn'> Upload </button>
<script
src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
var regex = new RegExp("(.*?)\.(exe|sh|zip|alz)$");
var maxSize = 5242880;//5MB
function checkExtension(fileName, fileSize) {
if(fileSize >= maxSize) {
alert("파일 사이즈 초과");
return false;
}
if(regex.test(fileName)) {
alert("해당 종류의 파일은 업로드할 수 없습니다.");
return false;
}
return true;
}
$("#uploadBtn").on("click", function(e){
var formData = new FormData();
var inputFile = $("input[name='uploadFile']");
var files = inputFile[0].files;
console.log(files);
//add filedate to formdata
for(var i=0; i<files.length; i++) {
if(!checkExtension(files[i].name, files[i].size)) {
return false;
}
formData.append("uploadFile", files[i]);
}
$.ajax({
url: '/uploadAjaxAction',
processData : false,
contentType: false,
data: formData,
type: 'POST',
success: function(result) {
alert("Uploaded");
}
});
});
});
</script>
</form>
</body>
</html>
22.1.1 중복된 이름의 첨부파일 처리.
첨부파일 저장 시 신경쓰이는 건 크게 두 가지. 1) 중복된 이름의 파일 처리 2) 한 폴더 내에 너무 많은 파일의 생성 문제
1)은 현재 시간을 밀리세컨드까지 구분해 파일 이름을 생성해서 저장하거나 UUID를 이용해 중복이 발생할 가능성이 거의 없는 문자열을 생성해 처리. 2)는 한 폴더에 너무 많은 파일이 있는 경우 속도의 저하가 생기는 것을 방지하는 것. 일반적으로 날짜로 폴더를 생성해 파일을 저장한다.
22.1.2 년/월/일 폴더의 생성
java.io.File의 mkdirs를 이용하면 상위 폴더까지 한번에 생성할 수 있다.
private String getFolder() {
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
Date date = new Date();
String str = sdf.format(date);
return str.replace("-", File.separator);
}
@PostMapping("/uploadAjaxAction")
public void uploadAjaxPost(MultipartFile[] uploadFile) {
log.info("update ajax post.........");
String uploadFolder = "C:\\upload";
//make folder
File uploadPath = new File(uploadFolder, getFolder());
log.info("upload path : " + uploadPath);
if(uploadPath.exists() ==false) {
uploadPath.mkdirs();
} //make folder
for(MultipartFile multipartFile : uploadFile) {
log.info("-------------");
log.info("Upload File Name : " + multipartFile.getOriginalFilename());
log.info("Upload File Size : " + multipartFile.getSize());
String uploadFileName = multipartFile.getOriginalFilename();
//IE has file path
uploadFileName = uploadFileName.substring(uploadFileName.lastIndexOf("\\") + 1);
log.info("only file name : " + uploadFileName);
File saveFile = new File(uploadPath, uploadFileName);
try {
multipartFile.transferTo(saveFile);
}catch(Exception e) {
log.error(e.getMessage());
}
}
}getFolder는 오늘 날짜의 경로를 문자열로 생성한다. 생성된 경로는 폴더 경로로 수정된지 반환한다. uploadAjaxPost에서는 해당 경로가 있는지 검사하고, 폴더를 생성한다.
22.1.3 중복 방지를 위한 UUID 적용
package org.zerock.controller;
import java.io.File;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.UUID;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.multipart.MultipartFile;
import lombok.extern.log4j.Log4j;
@Controller
@Log4j
public class UploadController {
@GetMapping("/uploadForm")
public void uploadForm() {
log.info("upload form");
}
@PostMapping("/uploadFormAction")
public void uploadFormPost(MultipartFile[] uploadFile, Model model) {
String uploadFolder = "C:\\upload";
for(MultipartFile multipartFile : uploadFile) {
log.info("--------------------");
log.info("Upload File Name : " + multipartFile.getOriginalFilename());
log.info("Upload File size : " + multipartFile.getSize());
File saveFile = new File(uploadFolder, multipartFile.getOriginalFilename());
try {
multipartFile.transferTo(saveFile);
} catch(Exception e) {
log.error(e.getMessage());;
}
}
}
@GetMapping("/uploadAjax")
public void uploadAjax() {
log.info("upload ajax");
}
private String getFolder() {
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
Date date = new Date();
String str = sdf.format(date);
return str.replace("-", File.separator);
}
@PostMapping("/uploadAjaxAction")
public void uploadAjaxPost(MultipartFile[] uploadFile) {
log.info("update ajax post.........");
String uploadFolder = "C:\\upload";
//make folder
File uploadPath = new File(uploadFolder, getFolder());
log.info("upload path : " + uploadPath);
if(uploadPath.exists() ==false) {
uploadPath.mkdirs();
} //make folder
for(MultipartFile multipartFile : uploadFile) {
log.info("-------------");
log.info("Upload File Name : " + multipartFile.getOriginalFilename());
log.info("Upload File Size : " + multipartFile.getSize());
String uploadFileName = multipartFile.getOriginalFilename();
//IE has file path
uploadFileName = uploadFileName.substring(uploadFileName.lastIndexOf("\\") + 1);
log.info("only file name : " + uploadFileName);
UUID uuid = UUID.randomUUID();
uploadFileName = uuid.toString() + "_" + uploadFileName;
File saveFile = new File(uploadPath, uploadFileName);
try {
multipartFile.transferTo(saveFile);
}catch(Exception e) {
log.error(e.getMessage());
}
}
}
}
randomUUID로 임의의 값을 생성한다.
22.2 섬네일 이미지 생성
일반 파일과 이미지를 구분하는 것.
JDK1.4부터 ImageIO를 제공하므로 이를 이용해 원본 이미지의 크기를 줄일 수도 있고 ImgScalr처럼 별도의 라이브러리를 이용할 수도 있다. JDK에 포함된 API를 이용하는 방식보다 라이브러리를 이용하는 방식이 많은데 이는 이미지를 축소했을 때 크기나 해상도를 직접 조절하는 작업을 줄이기 위해서.
예제에선 Thumbnailator 라이브러리를 이용해 섬네일을 생성한다.
https://github/com/coobird/thumbnailator.
maven에서 Thumbnailator 라이브러리를 가져온다.
<!-- https://mvnrepository.com/artifact/net.coobird/thumbnailator -->
<dependency>
<groupId>net.coobird</groupId>
<artifactId>thumbnailator</artifactId>
<version>0.4.8</version>
</dependency>
- 업로드된 파일이 이미지 종류 파일인지 확인
- 이미지 파일이면 섬네일 이미지 생성 및 저장
22.2.1 이미지 파일의 판단
파일 자체가 이미지인지 체크한 뒤 저장하는 것이 좋다.
private boolean checkImageType(File file) {
try {
String contentType = Files.probeContentType(file.toPath());
return contentType.startsWith("image");
}catch(IOException e) {
e.printStackTrace();
}
return false;
}
만일 이미지 타입이면 섬네일 생성하도록 코드 수정
package org.zerock.controller;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.nio.file.Files;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.UUID;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.multipart.MultipartFile;
import lombok.extern.log4j.Log4j;
import net.coobird.thumbnailator.Thumbnailator;
@Controller
@Log4j
public class UploadController {
@GetMapping("/uploadForm")
public void uploadForm() {
log.info("upload form");
}
@PostMapping("/uploadFormAction")
public void uploadFormPost(MultipartFile[] uploadFile, Model model) {
String uploadFolder = "C:\\upload";
for(MultipartFile multipartFile : uploadFile) {
log.info("--------------------");
log.info("Upload File Name : " + multipartFile.getOriginalFilename());
log.info("Upload File size : " + multipartFile.getSize());
File saveFile = new File(uploadFolder, multipartFile.getOriginalFilename());
try {
multipartFile.transferTo(saveFile);
} catch(Exception e) {
log.error(e.getMessage());;
}
}
}
@GetMapping("/uploadAjax")
public void uploadAjax() {
log.info("upload ajax");
}
private String getFolder() {
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
Date date = new Date();
String str = sdf.format(date);
return str.replace("-", File.separator);
}
private boolean checkImageType(File file) {
try {
String contentType = Files.probeContentType(file.toPath());
return contentType.startsWith("image");
}catch(IOException e) {
e.printStackTrace();
}
return false;
}
@PostMapping("/uploadAjaxAction")
public void uploadAjaxPost(MultipartFile[] uploadFile) {
log.info("update ajax post.........");
String uploadFolder = "C:\\upload";
//make folder
File uploadPath = new File(uploadFolder, getFolder());
log.info("upload path : " + uploadPath);
if(uploadPath.exists() ==false) {
uploadPath.mkdirs();
} //make folder
for(MultipartFile multipartFile : uploadFile) {
log.info("-------------");
log.info("Upload File Name : " + multipartFile.getOriginalFilename());
log.info("Upload File Size : " + multipartFile.getSize());
String uploadFileName = multipartFile.getOriginalFilename();
//IE has file path
uploadFileName = uploadFileName.substring(uploadFileName.lastIndexOf("\\") + 1);
log.info("only file name : " + uploadFileName);
UUID uuid = UUID.randomUUID();
uploadFileName = uuid.toString() + "_" + uploadFileName;
try {
File saveFile = new File(uploadPath, uploadFileName);
multipartFile.transferTo(saveFile);
//check image type file
if(checkImageType(saveFile)) {
FileOutputStream thumbnail = new FileOutputStream(new File(
uploadPath, "s_" + uploadFileName));
Thumbnailator.createThumbnail(multipartFile.getInputStream(),
thumbnail, 100, 100);
thumbnail.close();
}
}catch(Exception e) {
log.error(e.getMessage());
}
}
}
}
s_로 시작하는 썸네일 파일이 따로 생긴다.
22.3 업로드된 파일의 데이터 반환
서버에서 ajax의 결과로 전달해야 하는 데이터는 업로드된 파일의 경로가 포함된 파일의 이름이다.
브라우저로 전송해야 하는 데이터는 업로드된 파일의 이름과 원본 파일 이름, 파일이 저장된 경로, 업로드된 파일이 이미지인지 아닌지 정보를 포함하도록 설계한다.
이에 대한 모든 정보를 처리하는 방법은 1) 업로드된 경로가 포함된 파일 이름을 반환하는 방식 2) 별도의 객체를 생성해 처리하는 방법을 고려할 수 있다.
jackson-databind 라이브러리 포함.
<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.9.5</version>
</dependency>
<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.dataformat/jackson-dataformat-xml -->
<dependency>
<groupId>com.fasterxml.jackson.dataformat</groupId>
<artifactId>jackson-dataformat-xml</artifactId>
<version>2.9.5</version>
</dependency>
22.3.1 AttachFileDTO 클래스
org.zerock.domain 패키지에 첨부파일 정보들을 저장하는 AttachFileDTO 클래스 작성.
package org.zerock.domain;
import lombok.Data;
@Data
public class AttachFileDTO {
private String fileName;
private String uploadPath;
private String uuid;
private boolean image;
}
AttachFileDTO 클래스엔 원본 파일 이름, 경로,UUID 값, 이미지 여부 정보를 하나로 묶어 전달하는 용도로 쓰인다.
@PostMapping(value="/uploadAjaxAction",
produces= MediaType.APPLICATION_JSON_UTF8_VALUE)
@ResponseBody
public ResponseEntity<List<AttachFileDTO>>
uploadAjaxPost(MultipartFile[] uploadFile) {
List<AttachFileDTO> list = new ArrayList<AttachFileDTO>();
String uploadFolder= "C:\\upload";
String uploadFolderPath = getFolder();
//make folder
File uploadPath = new File(uploadFolder, uploadFolderPath);
if(uploadPath.exists()==false) {
uploadPath.mkdirs();
}
for(MultipartFile multipartFile : uploadFile) {
AttachFileDTO attachDTO = new AttachFileDTO();
String uploadFileName = multipartFile.getOriginalFilename();
uploadFileName = uploadFileName.substring(uploadFileName.lastIndexOf("\\") + 1);
log.info("only file name : " + uploadFileName);
attachDTO.setFileName(uploadFileName);
UUID uuid = UUID.randomUUID();
uploadFileName = uuid.toString() + "_" + uploadFileName;
try {
File saveFile = new File(uploadPath, uploadFileName);
multipartFile.transferTo(saveFile);
attachDTO.setUuid(uuid.toString());
attachDTO.setUploadPath(uploadFolderPath);
if(checkImageType(saveFile)) {
attachDTO.setImage(true);
FileOutputStream thumbnail = new FileOutputStream(
new File(uploadPath, "s_" + uploadFileName));
Thumbnailator.createThumbnail(multipartFile.getInputStream(),
thumbnail, 100, 100);
thumbnail.close();
}
list.add(attachDTO);
} catch(Exception e) {
e.printStackTrace();
}
}
return new ResponseEntity<List<AttachFileDTO>>(list, HttpStatus.OK);
}
uploadAjaxPost()는 기존과 달리 ResponseEntity<List<AttachFileDTO>>. 반환 형태로 수정, JSON 데이터를 반환하도록 변경된다.
22.3.2 브라우저에서 Ajax 처리
uploadAjax.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>
</head>
<body>
<h1>Upload with Ajax</h1>
<div class='uploadDiv'>
<input type='file' name='uploadFile' multiple>
</div>
<button id='uploadBtn'> Upload </button>
<script
src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
var regex = new RegExp("(.*?)\.(exe|sh|zip|alz)$");
var maxSize = 5242880;//5MB
function checkExtension(fileName, fileSize) {
if(fileSize >= maxSize) {
alert("파일 사이즈 초과");
return false;
}
if(regex.test(fileName)) {
alert("해당 종류의 파일은 업로드할 수 없습니다.");
return false;
}
return true;
}
$("#uploadBtn").on("click", function(e){
var formData = new FormData();
var inputFile = $("input[name='uploadFile']");
var files = inputFile[0].files;
console.log(files);
//add filedate to formdata
for(var i=0; i<files.length; i++) {
if(!checkExtension(files[i].name, files[i].size)) {
return false;
}
formData.append("uploadFile", files[i]);
}
$.ajax({
url: '/uploadAjaxAction',
processData : false,
contentType: false,
data: formData,
type: 'POST',
dataType: 'json',
success: function(result) {
console.log(result);
}
});
});
});
</script>
</form>
</body>
</html>
Ajax를 호출했을 때 데이터 타입을 json으로 결과를 콘솔에 찍는다.
'개발 공부 > Spring' 카테고리의 다른 글
| 코드로 배우는 스프링 웹 프로젝트-23. 브라우저에서 썸네일 처리 (0) | 2020.07.15 |
|---|---|
| 코드로 배우는 스프링 웹 프로젝트-part6.파일 업로드 처리-21.파일 업로드 방식 (0) | 2020.07.15 |
| 코드로 배우는 스프링 웹 프로젝트-20. 댓글과 댓글 수에 대한 처리 (0) | 2020.07.14 |
| 코드로 배우는 스프링 웹 프로젝트-19.스프링에서 트랜잭션 관리 (0) | 2020.07.14 |
| 코드로 배우는 스프링 웹 프로젝트-Part5.AOP와 트랜잭션-chap18.AOP라는 패러다임 (0) | 2020.07.14 |
