[Linux] Java - CKEditor4 이미지 업로드 / 외부 폴더에 저장 설정 / 저장한 이미지 불러오기

 

이전에 windows에서 Eclipes 툴로 java 사용해서 CkEditor4 이미지 업로드 후 외부 폴더에 추가 저장 후 

저장한 이미지 불러오기 설정을 했고

 

나는 windows 말고 Linux환경에서도 java 프로젝트를 진행 중이라...

Linux OS 에서도 java - tomcat 을 활용 해서 CKEditor4 이미지 업로드 후 저장과 외부 폴더에 있는 이미지 불러오기를 해보겠습니다.

 

이미 windows로 하는 방법을 보고 오신 분들은 Linux도 쉽게 하실 수 있으실겁니다.

 

Windows로 하는법을 못 보신 분들이나 궁금하신 분들은 

아래 링크 타고 가서 보시면 됩니다.

 

Windows로 java-CKEditor4 이미지 업로드 / 외부폴더 저장 설정/ 저장한 이미지 불러오기

[windows] Java - CKEditor4 이미지 업로드 / 외부 폴더에 저장 설정 / 저장한 이미지 불러오기

 

Linux와 Windows OS환경만 다르지 ... CKEditor를 활용해서 이미지 업로드, 불러오기 등은 크게 차이가 없어서 쉽게 했습니다.

 

그럼 Linux에서 java - tomcat CKEditor4 이미지 업로드 구현 해보겠습니다.

 

먼저 Windows 환경에서 한거처럼 Eclipse 에서 tomcat에 있는 server.xml에서 <Context>를 추가 해주겠습니다.

 

경로는 각자 Linux에서 tomcat 폴더 안에 conf로 가시면 있을 겁니다.

 

저 같은 경우는 cd / 경로 안에 있어 바로 들어갔습니다.

# tomcat 안에 conf 파일로 가기
cd /apache-tomcat-8.5.59/conf/

# server.xml 파일 있는지 보기
# ll 명령어 치면 밑으로 쫙 나옴
ll

 

 

이렇게 해서 tomcat에 conf 파일로 들어가 주고

pwd로 경로 체크 한번 해줬음.

 

 

잘 들어갔고 

 

ll명령어로 server.xml 파일 있는지 확인

 

파일 있는거 위치 확인 하고 

vi 편집 명령어 이용해서 server.xml 파일로 들어가기

vi server.xml

 

<Context docBase="/img/info" path="/ckstorage" reloadable="true" /> 

한줄 추가 해주기

 

제일 하단에 아마 등록이 되어 있을 건데

<Host> 태그 안에 적어 주면 됩니다.

 

docBase는 아마 이미지자 저장될 폴더 경로 이고

path 는 url중 /ckstorage로 들어오면 여기 경로 폴더에 있는 이미지를 불르겠다? 이런거 같음

 

자 이렇게 Linux에서 tomcat 안에 server.xml 설정은 마무리 해주고

server.xml파일은 위에 <Context>를 적어 줬다면 esc 누르고 

:wq로 저장 해주고 나오면 됩니다.

 

자 이제 <Context> 에서 docBase 경로 파일이 있어야 tomcat이 오류 안나고 실행 되기 때문에

/img/info 파일을 만들어 주겠습니다.

# / 경로로 나온 후
cd / 

# 폴더 생성
mkdir img
# 생성된 폴더로 들어가서
cd img 
# 한번더 폴더 생성
mkdir info

 

폴더 생성 까지 하면 밑 작업은 끝났고

 

이제 CKEditor 이미지 업로드 설정 java - jsp 등에서 해주면 됩니다.

 

저는 java로 해주었기 때문에 java 방식으로 하는거 알려드릴께요!

 

java 설정은 windows에서 한거랑 비슷하지만 한 부분이 조금 틀립니다.

 

@RequestMapping(value = "/imageUpload.do", method = RequestMethod.POST)
public void uploadimg(HttpServletRequest request,HttpServletResponse response, MultipartFile upload) 
	throws Exception {
        //인코딩 설정
        response.setCharacterEncoding("utf-8");
        response.setContentType("application/json");

        //파일 이름 가져오기
        String fileName = upload.getFileName

        //파일을 바이트 배열로 변환
        byte[] bytes=upload.getBytes();

        //파일 저장 path
        String fileSavePath = "";
	fileSavePath += "http://localhost:8080/ckstorage/" +  fileName;
        
        String uploadPath = request.getSession().getServletContext().getRealPath("/").concat("ckstorage");
        // 파일 서버에 저장 = 서버로 내보낸다!!
        OutputStream out = new FileOutputStream(new File(uploadPath + File.separator + fileName));
        //서버에 write
        out.write(bytes);
        out.flush();	//데이터 전송 후 초기화    

        //외부 폴더에 저장 -> 이 폴더 이미지를 사용
        String uploadPath2 = "/img/info";
        File backupYearDir = new File(uploadPath2);
        if (!backupYearDir.exists()) {
            backupYearDir.mkdirs(); // 폴더 생성
        }
        OutputStream out2 = new FileOutputStream(new File(uploadPath2 + File.separator + fileName));
        out2.write(bytes);
        out2.flush(); // 데이터 전송 후 초기화

        //클라이언트에 이벤트 추가 (자바스크립트 실행)
        PrintWriter printWriter=response.getWriter(); //자바스크립트 쓰기위한 도구

        /*
         * 과거에는 callback 해서 값을 받아왔는데, CKEDITOR 버전이 업데이트 되면서
         * JSON 형태로 리턴을 해야한다. 
         */
        JsonObject json = new JsonObject();
        json.addProperty("uploaded", 1);
        json.addProperty("fileName", fileName);
        json.addProperty("url", fileSavePath);
        printWriter.println(json);
        printWriter.flush();
}

 

외부 폴더에 저장할때 경로만 아까 생성한 위치로 설명 잘 해주시면 windows에서 설정한거랑 다른거 없이 소스 사용하시면 됩니다.

 

아 그리고 CKEditor 설치 후 폴더 같이 넣어줄 텐데 그 폴더 안에 config.js 있는데 여기에 

config.filebrowserImageUploadUrl = '/imageUpload.do?type=Images'; 

이 경로만 설정 해주면 저 경로 타고 java로 들어간 후 java 안에서 이미지 업로드 소스 타고 실행 되고 

 

CKEditor로 이미지 업로드 하고 tomcat 안에 폴더에만 저장이 되는게 아니라 외부 방금 경로 설정한 폴더에도 이미지가 저장 되면서

/ckstorage 경로로 들어오는 url은 server.xml에 설정 해주었기 때문에 tomcat 밖에 폴더에 있는 이미지를 가져와서 사용합니다.

 

그래서 외부 폴더 백업 폴더에 있는 이미지는 삭제 하시면 tomcat 실행하고 보면... 이미지가 안나올 겁니다.

 

그럼 여기까지 Linux java-tomcat CKEditor 이미지 업로드 마치겠습니다.