😰 썸머노트의 자체 이미지 저장 방식은 base64를 사용하기에 서버에 다소 무리가 있다
그래서 이미지는 내 컴퓨터에 저장하면서 이름은 uuid로 새로 생성해 줄 것이다

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);
}
});
}
'개발 > SpringBoot' 카테고리의 다른 글
| [SpringBoot] OAuth 로그인 - 1 사전 준비 (구글, 네이버, 카카오) (0) | 2024.02.14 |
|---|---|
| [SpringBoot] SpringSecurity - 2 로그인 실패 (0) | 2024.02.14 |
| [SpringBoot] SpringSecurity - 1 로그인 (0) | 2024.02.13 |
| [SpringBoot] 썸머노트(summernote) - 3 이미지 S3 저장 (0) | 2024.02.13 |
| [SpringBoot] 썸머노트(summernote) - 1 사용하기 (0) | 2024.02.13 |