웹에디터 게시판 써머노트 스프링 웹서버에 이미지 첨부하기

안녕하세요. 

 

오늘은 스프링 웹서버에서 써머노트 이미지 첨부를 해보겠습니다.

 

단순한 이미지 첨부가 아니라 웹에디터 형식의 게시판 써머노트는 ajax를 통한 이미지 첨부를 하게 되는데요.

 

써머노트에서 제공하는 callback함수를 통해 이를 사용할 수 있습니다.

 

아래 자바스크립트 코드를 보면 callbacks로 콜백 함수 설정이 있고 onImageUpload라는 키값이 있습니다. 

 

이는 써머노트에서 이미지가 첨부됬음을 감지하여 실행할 함수를 설정할 수 있는데요. 

 

저는 sendFile()이라는 함수를 만들어 설정했습니다. 

 

$('.summernote').summernote({
	height : 400,
	lang: "ko-KR",
	minHeight : null,
	maxHeight : null,
	focus : true,
	callbacks : {
		onImageUpload : function(files, editor, welEditable) {     
			for (var i = 0; i < files.length; i++) {
				sendFile(files[i], this);
			}
		}
	}
});

function sendFile(file, editor) {
	var form_data = new FormData();
	form_data.append('file', file);
	$.ajax({
		data : form_data,
		type : "POST",
		url : '/resources/summerimages',
		cache : false,
		contentType : false,
		enctype : 'multipart/form-data',
		processData : false,
		success : function(url) {
			$(editor).summernote('insertImage', url, function($image) {
				$image.css('width', "25%");
			});
		}
	});
}

 

 

 

ajax를 사용해보신 분들이라면 위의 sendFile() 함수를 보고 어떻게 돌아가는지 쉽게 이해할 수 있을 것입니다. 

 

/resources/summerimages 경로에 post요청으로 서버에 매핑을 하였습니다. 

 

당연히 스프링 서버에 url 매핑에 대한 컨트롤러 설정과 서비스 설정을 해야겠죠.

 

 

 

@RequestMapping(value="resources/summerimages", method=RequestMethod.POST)
	public ResponseEntity<?> summerimage(@RequestParam("file") MultipartFile img, HttpServletRequest request) throws IOException {
		String path = request.getServletContext().getRealPath("resources/theme/summerimages");
		Random random = new Random();
	
		long currentTime = System.currentTimeMillis();
		int	randomValue = random.nextInt(100);
		String fileName = Long.toString(currentTime) + "_"+randomValue+"_a_"+img.getOriginalFilename();
		
		File file = new File(path , fileName);
		img.transferTo(file);
		return ResponseEntity.ok().body("resources/summerimages/"+fileName);

	}

 

저는 위의 코드 처럼 resources/theme/summerimages라는 폴더에 이미지를 첨부하였습니다. 

 

여기서 부터는 각자 자신의 환경에 맞게 이미지 첨부 경로를 정하고 db에 저장할 서비스 로직을 만드시면 됩니다. 

 

위의 코드는 단순히 참고만 해주세요.

 

 

이렇게 하면 스프링에서 써머노트를 활용한 이미지 첨부가 가능합니다. 

 

 

 

그런데 여기서 이슈 사항이 있습니다. 

 

우리가 구현한 방식은 이미지를 등록하기만 하면 바로 서버에 이미지가 첨부 되는 방식입니다. 

 

만일 게시글을 작성하는 작성자가 이미지를 등록하고 글을 등록하지 않고 페이지를 나갔을때에도

 

이미지가 첨부되는 이슈 사항이 있습니다.

 

뭐 방법이야 다양하겠지만 이미지가 첨부된 폴더에 있는 파일 목록을 모두 가져오고

 

DB에 있는 이미지 이름을 가져와 매핑이 되지 않는 파일의 경우 게시글로 등록되지 않은 이미지이므로 삭제 하는

 

방식으로 운영할 수도 있겠습니다. 

 

뭐 이때에는사용자들이 잘 사용하지 않는 시간대에 크론을 통해서 설정하는 것도 하나의 방법이 될 수 있겠죠.

 

 

자바에서 파일 목록을 가져오는 코드는 밑의 코드를 참조하시면 됩니다. 

 

File dir = new File("폴더경로");
File files[] = dir.listFiles();

for (int i = 0; i < files.length; i++) {
    System.out.println(files[i]);
}