[CKEDITOR] CKEDITOR 이미지 업로드(스프링)

이번 포스팅에서는 Ckeditor 이미지 업로드를 하려고한다.

필자는 스프링을 서버로 사용한다.

 

 

 

먼저 ckfinder를 추가한다.

uploadUrl은 이미지 업로드 시 서버로 전송하는 url이다.

ckfinder: {
	uploadUrl: '/ajax/image.do'
},

 

 

 

 

Ckeditor 이미지 업로드는 서버에 이미지를 보내고 return 받기 전까지 base64를 이용하여 이미지를 보여주고 return 받을 때 base64 코드를 이미지 url로 변경해준다.

필자 서버 소스이다.

 

return 할 때 uploaded와 url을 보내주면 이미지 업로드가 정상적으로 작동한다.

나머지 위에 코드는 이미지 저장하는 로직으로 참고만 하면 된다.

그리고 이미지 업로드는 기본적으로 다중 업로드가 가능하여 for문을 사용하여 처리하였다.

@Value("#{props['editor.img.save.url']}")
private String saveUrl;

@Value("#{props['editor.img.load.url']}")
private String loadUrl;

@Value("#{props['editor.mode']}")
private String mode;

@RequestMapping(value="/ajax/image.do")
public ModelAndView image(@RequestParam Map<String, Object> map, MultipartHttpServletRequest request) throws Exception{
	ModelAndView mv = new ModelAndView("jsonView");

	List<MultipartFile> fileList = request.getFiles("upload");

	String imgPath = null;

	for (MultipartFile mf : fileList) {
		if (fileList.get(0).getSize() > 0) {
			String originFileName = mf.getOriginalFilename(); // 원본 파일 명
			log.debug("originFileName==" + originFileName);
			String ext = FilenameUtils.getExtension(originFileName);
			String newInfImgFileName = "img_" + UUID.randomUUID() + "." + ext;

			imgPath = loadUrl + newInfImgFileName;

			File file = new File(saveUrl + newInfImgFileName);

			mf.transferTo(file);

			if(!"local".equals(mode)) {
				Runtime.getRuntime().exec("chmod 666 " + file);
			}

		}

	}

    mv.addObject("uploaded", true);
    mv.addObject("url", imgPath);
    return mv;
}

 

 

 

 

정상적으로 이미지가 업로드 되었다.