징징이희수
222
2020-05-13 11:25:01
2
175

summernote 에디터 이미지 업로드 도와주세요.. ㅠㅠ


summernote 에디터로 이미지 업로드를 구현중에 있습니다

ajax로 이미지 저장하고 경로 + 이미지명 반환해주고있는데 지정 경로에 이미지 업로드는 되고

반환도 잘되는데 이미지 추가가 안되고있습니다 ㅠ 

콘솔로도 찍어보고 alert창으로도 찍어봐도 경로+이미지명.jpg 값이 문제업이 나오는데

에디터에 추가가 안되는 이유를 모르겠네요 ㅠ 

이미지 업로드를 해도 에디터>코드보기했을 때 코드가 없습니다.

jsp


<script>
	$(document).ready(function() {
		  $('#summernote').summernote({
	 	    	placeholder: '게시글을 작성해주세요.',
		        minHeight: 370,
		        maxHeight: null,
		        focus: true, 
		        lang : 'ko-KR',
		        toolbar: [
	              ["style", ["style"]],
	              ["font", ["bold", "underline", "clear"]],
	              ["fontname", ["fontname"]],
	              ["para", ["ul", "ol", "paragraph"]],
	              ["table", ["table"]],
	              ["insert", ["link", "picture", "video"]],
	              ["view", ["fullscreen", "codeview"]],
	              ['highlight', ['highlight']]
	            ],
	            callbacks: {	//여기 부분이 이미지를 첨부하는 부분
					onImageUpload : function(files) {
						uploadSummernoteImageFile(files[0],this);
					}
				}
		  });
	});
	
	function uploadSummernoteImageFile(file, editor) {
		var data = new FormData();
		data.append("file", file);
		$.ajax({
			data : data,
			type : "POST",
			url : "/uploadSummernoteImageFile",
			contentType : false,
			processData : false,
			success : function(data) {
            	            //항상 업로드된 파일의 url이 있어야 한다.
            	            $(editor).summernote('insertImage', data.url);
            	                alert("Success");
			 }
			,error:function(request,status,error, data){
            	            alert("Error");
         	        }
		});
	}
	$(function() { 
		$("#commentForm").validate();
		$.extend( $.validator.messages, { 
			required: "필수 항목입니다."
		} ); 
	});
</script>


Controller

	/**
	 * Method ID : uploadSummernoteImageFile
	 * Method 설명 : 글작성 시, 업로드 되는 이미지 AJAX
	 * @param multipartFile
	 * @return
	 */
	@ResponseBody
	@RequestMapping(value="/uploadSummernoteImageFile", method=RequestMethod.POST, produces = "application/json")
	public Object uploadSummernoteImageFile(@RequestParam("file") MultipartFile multipartFile) {
	
		boolean result = false;
		String savedName = "";
		Map<String, Object> object = new HashMap<String, Object>();
		try {
			
			savedName = multipartFile.getOriginalFilename();
			result = uploadService.FileUpload(uploadPath, multipartFile);
			
			if(result)
			{
				object.put("url", uploadPath + "/" + savedName);
				object.put("responseCode", "success");
			}

		}catch(Exception e) {
			object.put("responseCode", "error");
			e.printStackTrace();
		}
		
		return object;
	}

data.url 을 콘솔로 찍으면

C:\image\업로드파일.jpg 이렇게 찍힙니다.

0
0
  • 답변 2

  • misatyo
    72
    2020-05-13 12:23:36

    예전에 해서 기억이 나지 않지만

      $(editor).summernote('insertImage', data.url);

    insertImage가 api에 있는지 (오타 가능성) 확인하시고

    로컬 톰캣서버에 이미지가 잘 올라가있는지 이미지 상세보기로 확인하시고

    아마 톰캣과 C:\image\ (리소스) 를 연결? 하는 부분이 있는 걸로 압니다.

    톰캣 설정 xml에 있는 것 같아요 그부분 추가하셔야 합니다.

    추가로 이미지 이름이 같으면 문제가 생길 수 있기 때문에 UUID와 폴더 관리를 추가하셔야 합니다
      

    0
  • 징징이희수
    222
    2020-05-13 12:56:14

    misatyo  답변 감사합니다. 

    답변해주신대로 가장 먼저 summernote 공식 api 문서를 확인해본 결과 

    // @param {String} url
    // @param {String|Function} filename - optional
    $('#summernote').summernote('insertImage', url, filename);

    URL 과 FileName 을 따로 던져줘야했는데 저는 URL + FileName 으로 던져주고

    있었습니다..

    블로그 보면 거의 다 이렇게 사용하시길래 이런 줄알았는데 공식 API를 참고하는 습관을 길러야할 것

    같습니다 ㅠㅠ

    감사합니다.

    0
  • 로그인을 하시면 답변을 등록할 수 있습니다.