[SpringBoot] 썸머노트(summernote) - 2 이미지 저장

😰 썸머노트의 자체 이미지 저장 방식은 base64를 사용하기에 서버에 다소 무리가 있다

그래서 이미지는 내 컴퓨터에 저장하면서 이름은 uuid로 새로 생성해 줄 것이다

이미지 하나에 약 79,000자?

 

1. pom.xml

- dependency 추가 (Maven)

<!-- Jsoup -->
<dependency>
	<groupId>org.jsoup</groupId>
	<artifactId>jsoup</artifactId>
	<version>1.14.3</version>
</dependency>

<!-- gson -->
<dependency>
	<groupId>com.google.code.gson</groupId>
	<artifactId>gson</artifactId>
</dependency>

<!-- commons-io -->
<dependency>
	<groupId>commons-io</groupId>
	<artifactId>commons-io</artifactId>
	<version>2.11.0</version>
</dependency>

 

2. application.yml

- json 컨버터를 gson으로 세팅, 업로드파일 용량 수정

spring:
  mvc:
    view:
      prefix: /WEB-INF/views/
      suffix: .jsp
    converters:
      preferred-json-mapper: gson
  servlet:
    multipart:
      max-file-size: 20MB
      max-request-size: 20MB

 

3. FileManageController.java

- 파일 업로드 구현 (내 컴퓨터의 C:/workspace/project1/myImage/ 폴더내로 저장)

@Controller
public class FileManageController {

	@PostMapping(value="/uploadSummernoteImageFile", produces = "application/json")
    @ResponseBody
    public JsonObject uploadSummernoteImageFile(@RequestParam("file") MultipartFile multipartFile) {

        JsonObject jsonObject = new JsonObject();

        String fileRoot = "//C:/workspace/project1/myImage/"; // 저장될 경로
        
        String originalFileName = multipartFile.getOriginalFilename(); // 원본명
        String extension = originalFileName.substring(originalFileName.lastIndexOf(".")); // 확장자

        String newFileName = UUID.randomUUID() + extension; // UUID 사용

        File targetFile = new File(fileRoot + newFileName);

        try {
            InputStream fileStream = multipartFile.getInputStream();
            FileUtils.copyInputStreamToFile(fileStream, targetFile); // 파일 저장
            jsonObject.addProperty("url", "/contentImage/"+newFileName);
            jsonObject.addProperty("responseCode", "success");
            
        } catch (IOException e) { // 실패 시 파일 삭제
            FileUtils.deleteQuietly(targetFile);
            jsonObject.addProperty("responseCode", "error");
            e.printStackTrace();
        }
        
        return jsonObject;
    }

}

 

4. WebMvcConfig.java

- 외부 리소스 접근설정 (외부 리소스에 접근할 수 있게 해준다)

@Configuration
public class WebMvcConfig implements WebMvcConfigurer{
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/contentImage/**")
                .addResourceLocations("file:///C:/workspace/project1/myImage/");
    }
}

 

5. script

- 이전 포스팅에서 작성한 script에 내용 추가

$(document).ready(function() {
	$('.summernote').summernote({
		placeholder : '',
		tabsize : 2,
		height: 300,
		minHeight : 300,
		maxHeight : 300,
		disableResizeEditor : true,
		lang : 'ko-KR',
		toolbar : [
			['style', ['style'] ],
			['fontsize', ['fontsize']],
			['font',['bold','italic','underline','strikethrough','clear']],
			['color',['color']],
			['para',['paragraph']],
			['height',['height']],
			['table',['table']],
			['insert',['picture','link','hr']],
			['view',['codeview']]],
		fontSizes : ['8','10','12','14','16','18','20','22','24','28','30','36','50','72'],
		lineHeights : ['0.2','0.3','0.4','0.5','0.6','0.8','1.0','1.2','1.4','1.5','2.0','3.0'],
        
		callbacks : { // (추가한 코드) 이미지 첨부 
        	onImageUpload : function(files) {
            	console.log(files)
                uploadSummernoteImageFile(files[0],this);
			}
		}
        
	});
});

// (추가한 코드) callbacks의 uploadSummernoteImageFile 메서드
function uploadSummernoteImageFile(file, editor) {
    data = new FormData();
    data.append("file", file);
    $.ajax({
        data : data,
        type : "POST",
        url : "/uploadSummernoteImageFile",
        contentType : false,
        processData : false,
        success : function(data) {
            $(editor).summernote('insertImage', data.url);
        }
    });
}