스프링부트를 통해 이미지를 어떻게 서버에 저장하지 알아보자
시작하기에 앞서 아래 링크를 읽고 정리한 내용임을 밝힌다
1. 클라이언트 페이지 작성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="imgForm" method="post" action="/profile-upload" enctype="multipart/form-data">
<input type='file' id="myFile" name="file"/>
<img id="View" src="#" alt="이미지 미리보기" />
<input type="submit" value="send">
</form>
<script src="http://madalla.kr/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function() {
$("#myFile").on('change', function(){
readURL(this);
});
});
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#View').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
</script>
</body>
</html> input을 통해 이미지를 등록하고 send버튼을 눌러서 서버에 전송하는 클라이언트 페이지다.
여기서 알아두면 좋은 개념들
1. FileReader 객체 https://developer.mozilla.org/ko/docs/Web/API/FileReader
2. FileList 객체
https://developer.mozilla.org/ko/docs/Web/API/FileList
2. 서버사이드 작성
DTO 활용시
dto에서는 MultipartFile 클래스를 타입으로 명시해서 파일을 받아주면 된다.
컨트롤러 작성
@Controller
public class TestController {
@GetMapping("/profile-test")
public String profileImage(){
return "profileImage";
}
@ResponseBody
@PostMapping("/profile-upload")
public void uploadProfile(MemberForm form){
System.out.println(form.getFile());
}
}form.getFile()을 통해 파일을 얻어올 수 있다. 이제 이 파일의 파일명을 잘 조작해서 디비에 저장하고, 이미지는 서버 어딘가에 저장하면 된다.
