[스프링부트] 에디터 이미지업로드 시 임시폴더로 분리하기

기존 CK에디터를 이용해서 이미지를 업로드 할 때는 

 

js script 에디터부분에서 컨트롤러 호출 - 

 

multipart로 가져온 파일명을 중복되지않게 난수값을 포함해서 저장 -

 

로컬의 특정위치에 바꾼파일명으로 파일을 저장 - 

 

파일경로를 표시하는 특정문자열을 붙여서 에디터로 리턴 - 

 

에디터에서 <img scr="리턴한경로"> 로 이미지 출력

 

의 로직으로 이미지를 업로드 했다.

 

 

여기서 문제점은 일단 글을 작성하든 안하든 에디터로 이미지를 업로드 하는 순간,

 

사용자가 이미지를 보기 위해선 일단 로컬에 업로드를 시켜야 한다는 것이다.

 

지금까지는 사용자가 있는 웹을 생각하지 않았기 때문에, 그냥 하나의 폴더를 이용해서 이미지 업로드를 구현했지만

 

사용자가 다수 있을 때 이런식으로 구현하는건 꽤나 큰 서버 저장공간의 낭비를 만들 것 같아서

 

저장되는 파일을 분리하고 싶었다.

 

어떻게 구현해야할까 구글링을 하는 도중 OKKY의 질문답변글에서 보통 에디터 이미지 업로드는 구현할 때는

 

임시폴더를 만들어서 일단 이미지를 올리면 임시폴더에 업로드 되도록하고 insert로직에서 해당하는 이미지를

 

메인폴더로 옮겨주는 방법을 사용한다고 했다. 

 

관련 키워드를 구글링해봤지만 역시 나오지 않았다.

 

어떻게 하면 될까... 계속 생각을 하다가 문득 정규식을 사용해서 img태그를 뽑아내는 방법이 생각났고,

 

실제로 구현해보니 정상적으로 동작했다.

 

---

먼저 이미지를 업로드하는 로직이다.

 

원래는 파일의 메인위치에만 저장을 했지만, 임시파일위치에 에디터로 올린 이미지가 저장되도록 해주고

 

/img라는 태그를 저장명앞에 붙어준 후 리턴해준다.

 

---

 

스프링부트 Configuration에서 /img태그와 /image 태그를 나눠준다.

 

임시파일폴더와 메인폴더 경로이다.

 

로컬경로는 앞에 file:/// 를 꼭 붙여주자. ( 이 것 때문에 한나절을 고생했던 기억이 있음 )

 

스프링은 servlet-context.xml 파일에서 resources 태그로 해당 경로를 추가해주면 되겠다.

 

---

에디터로 쓴 글들을 String형식으로 가져오면 html 형식으로 작성이 되어있다.

 

이미지는 <img> 태그 형식으로 가져오는데, 이제 이미지태그 경로에는 /img가 붙어있을 것이다.

 

이 것을 이용해서 분리해보자.

 

 

 

먼저, 매개변수로 에디터의 값을 가져온다. 

 

그 후, 정규식을 이용해 img태그의 scr="" 안의 값을 가져온다.

 

이 것에 대한 설명은 전에 작성한 포스팅에 있으니 생략하겠다.

 

CK에디터로 올린 이미지에서 썸네일 뽑아내기 ( 정규식 ) — 간편 웹프로그래밍 (tistory.com)

CK에디터로 올린 이미지에서 썸네일 뽑아내기 ( 정규식 )

 

이제 뽑아낸 이미지경로를 String 변수 'img'에 담는다.

 

replace 함수를 이용해서 img에 /img 를 없애준다. 

 

이렇게 하면 파일명만 남게 된다.

 

파일명 앞에 메인폴더의 경로를 넣고 File클래스의 renameTo 함수를 이용해서 파일을 이동시켜준다.

 

이제 파일이 이동됐으니 에디터로 작성한 html 중 /img 를 /image 로 바꿔서 메인폴더 경로를 지정해주면 되겠다.

 

/img태그를 /image태그로 바꾼 content를 리턴해준다.

 

 

	  		public String moveImg(String content)throws Exception{
	  			
	  			 Pattern nonValidPattern = Pattern
	 			  		.compile("(?i)< *[IMG][^\\>]*[src] *= *[\"\']{0,1}([^\"\'\\ >]*)");
	 			  		Matcher matcher = nonValidPattern.matcher(content);
	 			  		String img = "";
	 			  		while (matcher.find()) {
	 			  			img = matcher.group(1);
	 			  			img = img.replace("/img", "");
	 			  			content = content.replace("/img", "/image");
	 			  			File file =new File("C:\\mp\\tempImg\\"+img);
	 			  			file.renameTo(new File(filePath+img));
	 			  			
	 			  		    }
	 			  		return content;
	 		}

 

 

---

이제 처리한 content 값을 insert 시켜주면 끝.

 

정상적으로 임시폴더의 파일이 메인폴더로 이동하고, /image 를 메인폴더경로로 지정해서 구현이 끝났다.

 

이제 스케줄러를 이용하든, 수동으로 하든 임시폴더를 주기적으로 비워주면 되겠다.

 

그리 오래 걸리진 않았지만 직접 구현할 때는 참 복잡하고 머리아팠는데

 

다 구현하고 포스팅을 할 땐 항상 많이 어렵지 않아서 자괴감이 든다.....

 

그래도 실력이 늘어서 혼자 구현 할 수 있는 능력이 생긴 것이 뿌듯하긴 하다..ㅜㅜ