[Summernote] 사진 업로드 하는 방법 with 정부프레임워크

안녕하세요. 이사작전.com의 개발자 플랫폼 공작소입니다.

오늘은 summernote의 사진 업로드에 대해서 얘기해보려 합니다.

저는 전자정부프레임워크를 사용하고 있습니다.

XSS과 웹쉘을 방어하기 위해 노력을 많이 기울인 프레임워크라는 생각이 듭니다.

아무튼, WBS에 나온 내용을 읽어보니 base64로 인코딩된 이미지를 DB에 넣어야 하는 작업이네요.

보안에는 도움이 된다고 하나, 이런 방법으로 처리를 했다가는 서버가 먼저 뻗어버리겠네요.

사진 파일이 5MB를 넘어가니까 예상대로 엄청난 과부하와 함께 서버가 종료되버리는 최악의 상황에 처하였습니다.

ㅠㅠㅠㅠㅠㅠㅠㅠ 내 이럴줄 알았엇

구글 씨의 조언을 토대로, 그냥... 파일을 업로드하고 다시 에디터에 붙여주는 방법을 선택하기로 하였습니다.

아무튼.. '대략 이렇게 처리하면 된다'라고 아이디어를 얻어가는 것 정도의 도움을 드립니다.

궁금한 것이 있다면 질문남겨주세요.

[코드공개] : TEST.js

   $(document).ready(function() {
        $('#nttCn').summernote({
               height: 800,   //set editable area's height
               callbacks: {
                       onImageUpload: function(image) {
                        uploadImage(image[0]);
                       }
               },
               lang : 'ko-KR',
               placeholder: '이제 본문에 #을 이용한 태그 입력도 가능해요! URL을 통해, 사진 및 youtube를 등록할 수도 있어요!',
               codemirror: { // codemirror options
               theme: 'monokai'
              }
        });        
    });
    
    function uploadImage(image) {
        var data = new FormData();
        data.append("image", image);
        $.ajax({
            type: "post",
            cache: false,
            contentType:false,
            processData: false,
            dataType :'jsonp',
            url: '/cop/bbs/insertSummberNoteFile.do',
            data: data,
            success: function(data) {
//이미지 경로를 작성하면 됩니다 ^  ^
                var image = $('<img>').attr('src', '/cmm/fms/getImage.do?atchFileId='+data[0].atchFileId+'&fileSn=0');
                $('#nttCn').summernote("insertNode", image[0]);
            },
            error: function(data) {
                alert('error : ' +data);
            }
        });
    }

[코드공개] : java 코드입니다.

/**
     * 단순 파일 업로드.
     *
     * @param boardVO
     * @param board
     * @param sessionVO
     * @param model
     * @return
     * @throws Exception
     */
    @RequestMapping("/cop/bbs/insertSummberNoteFile.do")
    public void insertSummberNoteFile(final MultipartHttpServletRequest multiRequest, @ModelAttribute("searchVO") BoardVO boardVO, @ModelAttribute("bdMstr") BoardMaster bdMstr,
            @ModelAttribute("board") Board board, BindingResult bindingResult, SessionStatus status, ModelMap model, HttpServletRequest request,HttpServletResponse response) throws Exception {
        LoginVO user = (LoginVO) EgovUserDetailsHelper.getAuthenticatedUser();
        Boolean isAuthenticated = EgovUserDetailsHelper.isAuthenticated();
        JSONArray reportJsonArray = new JSONArray();
        if (isAuthenticated) {
            List<FileVO> result = null;
            String atchFileId = "";
            final Map<String, MultipartFile> files = multiRequest.getFileMap();
            if (!files.isEmpty()) {
                result = fileUtil.parseFileInf(files, "BBS_", 0, "", "");
                atchFileId = fileMngService.insertFileInfs(result);
                JSONObject obj = new JSONObject();
                System.out.println(">>>>> atchFileId : " +atchFileId);
                obj.put("atchFileId", atchFileId);
                reportJsonArray.add(obj);
            }
                
            JSONObject obj = new JSONObject();
            reportJsonArray.add(obj);
                    
            response.setCharacterEncoding("utf-8");
            response.getWriter().println(request.getParameter("callback") + "(" + reportJsonArray+ ")");
            response.getWriter().close();
        }
    }

reference : http://stackoverflow.com/questions/21628222/summernote-image-upload

감사합니다. 도움이 되셨기를 바랍니다.