[SpringBoot] Summernote 이미지 다중 업로드!

 

Summernote 이미지 다중 업로드를 구현해 봅니다~~! 

기존 파일 업로드와 크게 다르지 않음.. ㅎㅎ 

사전준비 )

- summernote 관련 js, css 파일 다운로드 

 

1. Summernote 선언부에 onImageUpload  추가하기! 

$('#summernote').summernote({
		  height: 300,                
		  minHeight: 100,            
		  focus: true,                
		  lang: "ko-KR",				
		  placeholder: '최대 2048자까지 쓸 수 있습니다',
		  callbacks: {	
			onImageUpload : function(files) { // 이미지 업로드 펑션을 추가! 
				uploadSummernoteImageFile(files,this);
			},
			onPaste: function (e) {
				var clipboardData = e.originalEvent.clipboardData;
				if (clipboardData && clipboardData.items && clipboardData.items.length) {
					var item = clipboardData.items[0];
					if (item.kind === 'file' && item.type.indexOf('image/') !== -1) {
						e.preventDefault();
					}
				}
			}
		}
	});

onImageUpload를 통해 내가 선택한 파일을 가져올 수 있다. 

 

2. 파일을 업로드할 함수 구현 

function uploadSummernoteImageFile(file, editor) {
		var data = new FormData();
        // 다중파일 업로드를 위해 form에 담아주는 작업! 
		$.each(file, function(index, item){
			data.append("files", item);
		});
		
		$.ajax({
			data : data,
			type : "POST",
			url : "/files/reg", // controlle 매핑값 입력
			contentType : false, 
			processData : false,
			enctype: "multipart/form-data",
			success : function(data) {
				if(data.msg == "success") {
					$.each(data.rows, function(index, item){
						$(editor).summernote('insertImage', item);
					});
				}
            	
			}
		});
	}

업로드는 기존 파일 업로드와 많이 비슷하다~ 스크립트에서 form 을 생성하고 

file들을 담아 Contorller로 전달해주는 순서이다. 

 

	@PostMapping("/reg")
	public Map<String, Object> upload(@RequestParam("files") MultipartFile[] files) {
		
		Map<String, Object> res = new HashMap<String, Object>();
		String orgName= null, extension = null, newName = null;
		List<String> list = new ArrayList<>(); // 업로드된 파일의 URL을 담아줄 List를 생성
		
		try { 
			for (MultipartFile file : files) { // 전달받은 파일 개수만큼 반복! 
				
				orgName = file.getOriginalFilename(); // 실제 파일 이름 
				extension = FilenameUtils.getExtension(file.getOriginalFilename()); // 확장자
				newName  = Utils.nowToString() + FilenameUtils.EXTENSION_SEPARATOR + extension;
				// Utils.nowToString()은 내가 구현한거~! 본인이 짓고 싶은 이름을 만들어주는 함수를 구현하면 된다. 
                
				File tmp = new File(FILE_UPLOAD_PATH + newName); // FILE_UPLOAD_PATH 파일이 업로드 되는 실제 경로 
				list.add("/upload/"+newName); // 출력될 파일 URL를 담아준다. ( 상대경로~ )
				try {
					FileUtils.copyInputStreamToFile(file.getInputStream(), tmp);  
				} catch (IOException e) {
					e.printStackTrace();
				}
			}
			res.put("rows", list);// 업로드가 끝났다면 리스트를 담고 
			res.put("msg", "success"); // 성공사인으로 msg도 담아준다. 
		}catch (Exception e) {
			e.printStackTrace();
			res.put("msg", "fail"); // 에러가나는 경우 실패사인 담기 
		}
		
		return res;
	}

파일 리스트를 파라메터로 받아서 파일을 업로드해주고 그 경로를 다시 front 로 리턴해주는 방법이다. 

예를 들기 위해 세부내용을 걷어 낸 코드로 

파일을 업로드할땐 꼭 업로드 허용한 확장자인지,  메타데이터를 사용해 mine_type 검증을 해야한다.