파일 업로드 및 다운로드는 웹 개발에서 매우 기본적인 기능이지만 실제 개발에서는 파일 업로드 또는 다운로드 진행 상황을 실시간으로 표시해야 하는 경우가 많습니다. 이 기사에서는 Springboot를 사용하여 파일 업로드 및 다운로드를 구현하고 실시간 진행률 표시줄 기능을 추가하는 방법을 소개합니다.
파일 업로드
Maven 종속성 추가
먼저 다음 Maven 종속 항목을 추가해야 합니다.
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.3</version>
</dependency>
그 중 spring-boot-starter-web은 웹 애플리케이션 구축을 위해 Spring Boot에서 제공하는 종속성 중 하나이며 commons-fileupload는 널리 사용되는 Java 파일 업로드 라이브러리입니다.
HTML 양식 만들기
다음으로 파일을 제출할 HTML 양식을 만들어야 합니다. 이 양식에서 요소를 사용하여 업로드할 파일을 선택하고 양식을 제출하는 요소를 사용할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>File Upload</title>
</head>
<body>
<form action="/upload" method="post" enctype="multipart/form-data">
<input type="file" name="file"/>
<br/>
<input type="submit" value="Upload"/>
</form>
</body>
</html>
이 양식에서 양식의 action 속성을 업로드 요청을 처리할 URL인 "/upload"로 설정합니다.
파일 업로드 구현
Springboot에서는 org.springframework.web.multipart.MultipartFile 클래스를 사용하여 업로드된 파일을 처리할 수 있습니다. 업로드된 파일을 수신하고 처리하는 컨트롤러를 작성할 수 있습니다.
@RestController
public class UploadController {
@PostMapping("/upload")
public String upload(@RequestParam("file") MultipartFile file) throws IOException {
// do something with the file
return "success";
}
}
위의 코드에서 @RequestParam 주석을 사용하여 파일 업로드의 매개 변수 이름을 지정하고 파일을 디스크에 저장하거나 다른 작업을 수행합니다. 마지막으로 응답 내용으로 간단한 문자열을 반환합니다.
진행률 표시줄 추가
업로드 진행률 표시줄 기능을 구현하려면 JavaScript와 Ajax를 사용해야 합니다. 특히 XMLHttpRequest 개체를 사용하여 비동기 요청을 보내고 업로드 프로세스 중에 진행률 표시줄을 실시간으로 업데이트할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>File Upload</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(function () {
$("form").submit(function (event) {
event.preventDefault();
var formData = new FormData($(this)[0]);
$.ajax({
xhr: function () {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", function (evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
console.log(percentComplete);
$("#progress").css("width", percentComplete * 100 + "%");
}
}, false);
xhr.addEventListener("progress", function (evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
console.log(percentComplete);
$("#progress").css("width", percentComplete * 100 + "%");
}
}, false);
return xhr;
},
type: "POST",
url: "/upload",
data: formData,
processData: false,
contentType: false,
success: function (data) {
alert("Upload complete!");
}
});
});
});
</script>
</head>
<body>
<form>
<input type="file" name="file"/>
<br/>
<button type="submit">Upload</button>
</form>
<div style="background-color: #ddd; height: 20px; width: 0%;" id="progress"></div>
</body>
</html>
위의 코드에서 jQuery를 사용하여 XHR 요청을 보내고 업로드 중에 진행률 표시줄을 업데이트했습니다. 특히 xhr.upload에 진행률 이벤트 핸들러를 추가하고 xhr 객체를 추가하여 파일이 업로드되는 동안 진행률 표시줄을 실시간으로 업데이트했습니다.
문서 다운로드
파일 다운로드 구현
파일 다운로드를 구현하려면 컨트롤러를 작성하여 다운로드 요청을 처리하고 org.springframework.core.io.Resource 클래스를 사용하여 파일을 응답 콘텐츠로 클라이언트에 반환해야 합니다.
@RestController
public class DownloadController {
@GetMapping("/download")
public ResponseEntity<Resource> download() throws IOException {
Resource file = new FileSystemResource("/path/to/file");
HttpHeaders headers = new HttpHeaders();
headers.add(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=" + file.getFilename());
return ResponseEntity.ok()
.headers(headers)
.contentLength(file.contentLength())
.contentType(MediaType.parseMediaType("application/octet-stream"))
.body(new InputStreamResource(file.getInputStream()));
}
}
위의 코드에서 @GetMapping 주석을 사용하여 다운로드 요청을 처리하는 URL을 지정하고 org.springframework.core.io.Resource 클래스를 사용하여 파일 내용을 읽습니다. 마지막으로 파일을 응답 콘텐츠로 클라이언트에 반환합니다.
진행률 표시줄 추가
다운로드 진행률 표시줄을 추가하는 기능은 업로드 진행률 표시줄과 유사하며 여전히 XMLHttpRequest 개체와 JavaScript를 사용하여 달성할 수 있습니다. 특히 컨트롤러에 비동기식 요청을 보내고 다운로드 프로세스 중에 진행률 표시줄을 실시간으로 업데이트할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>File Download</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(function () {
$("#download").click(function (event) {
event.preventDefault();
var xhr = new XMLHttpRequest();
xhr.open("GET", "/download", true);
xhr.responseType = "blob";
xhr.onload = function () {
if (xhr.status === 200) {
var contentType = xhr.getResponseHeader("Content-Type");
var contentDisposition = xhr.getResponseHeader("Content-Disposition");
var blob = new Blob([xhr.response], {
type: contentType});
var link = document.createElement("a");
link.href = window.URL.createObjectURL(blob);
link.download = contentDisposition.split("=")[1];
link.click();
}
};
xhr.addEventListener("progress", function (evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
console.log(percentComplete);
$("#progress").css("width", percentComplete * 100 + "%");
}
}, false);
xhr.send();
});
});
</script>
</head>
<body>
<button id="download">Download</button>
<div style="background-color: #ddd; height: 20px; width: 0%;" id="progress"></div>
</body>
</html>
위의 코드에서는 jQuery를 사용하여 XHR 요청을 보내고 다운로드가 진행되는 동안 진행률 표시줄을 업데이트했습니다. 특히 xhr 객체에 진행률 이벤트 핸들러를 추가하여 파일을 다운로드하는 동안 진행률 표시줄을 실시간으로 업데이트했습니다.
결론적으로
이 기사에서는 Springboot를 사용하여 파일 업로드 및 다운로드를 구현하고 실시간 진행률 표시줄 기능을 추가하는 방법을 소개합니다. 파일을 업로드하고 다운로드할 때 XMLHttpRequest 개체와 JavaScript를 사용하여 실시간 진행률 표시줄을 구현했습니다. 이 기능은 사용자가 파일 업로드 및 다운로드 진행 상황을 더 잘 이해하고 사용자 경험을 개선하는 데 도움이 될 수 있습니다.