....
This commit is contained in:
lunaticbum
parent
c5de7a3548
commit
9e4597890b
@ -2,10 +2,16 @@ package kr.lunaticbum.back.lun.controllers
|
||||
|
||||
import jakarta.servlet.http.HttpServletRequest
|
||||
import jakarta.servlet.http.HttpServletResponse
|
||||
import kr.lunaticbum.back.lun.model.FileSaveResult
|
||||
import kr.lunaticbum.back.lun.model.ResponceResult
|
||||
import kr.lunaticbum.back.lun.utils.LogService
|
||||
import kr.lunaticbum.back.lun.utils.getFileExtension
|
||||
import org.springframework.beans.factory.annotation.Autowired
|
||||
import org.springframework.beans.factory.annotation.Value
|
||||
import org.springframework.core.io.Resource
|
||||
import org.springframework.core.io.UrlResource
|
||||
import org.springframework.http.MediaType
|
||||
import org.springframework.http.ResponseEntity
|
||||
import org.springframework.web.bind.annotation.*
|
||||
import org.springframework.web.multipart.MultipartFile
|
||||
import org.springframework.web.servlet.ModelAndView
|
||||
@ -40,47 +46,63 @@ class BlogController() {
|
||||
private val resourceHandler: String? = null
|
||||
|
||||
|
||||
@ResponseBody
|
||||
@GetMapping("/post/images/{fileName}")
|
||||
fun getImage(@PathVariable fileName : String) : Resource {
|
||||
val imgUploadPath = ("file:" +uploadPath + File.separator + fileName)
|
||||
return UrlResource.from(imgUploadPath)
|
||||
}
|
||||
|
||||
@PostMapping("/post/imageUpload")
|
||||
fun postImage(@RequestPart("file") upload: MultipartFile, res: HttpServletResponse, req: HttpServletRequest) {
|
||||
fun postImage(@RequestPart("file") upload: MultipartFile, res: HttpServletResponse, req: HttpServletRequest) : ResponseEntity<FileSaveResult> {
|
||||
var lResultCode = 0
|
||||
var lResultMsg = "Suscces"
|
||||
var out: OutputStream? = null
|
||||
var printWriter: PrintWriter? = null
|
||||
var targetFile : File? = null
|
||||
logService.log("imgUploadPath ${upload.originalFilename}")
|
||||
res.characterEncoding = "utf-8"
|
||||
res.contentType = "text/html;charset=utf-8"
|
||||
|
||||
var uuid = UUID.randomUUID()
|
||||
val extension: String = getFileExtension(upload.originalFilename) ?: ""
|
||||
try {
|
||||
val uuid = UUID.randomUUID()
|
||||
logService.log("imgUploadPath ${uuid.toString()}")
|
||||
|
||||
val extension: String = getFileExtension(upload.originalFilename) ?: ""
|
||||
logService.log("imgUploadPath ${uuid.toString()}")
|
||||
|
||||
val bytes = upload.bytes
|
||||
|
||||
var f = File(uploadPath)
|
||||
// logService.log("imgUploadPath ${f.parentFile.parentFile.parentFile.parentFile.absoluteFile}")
|
||||
// logService.log("imgUploadPath ${f.parentFile.parentFile.parentFile.absoluteFile}")
|
||||
// logService.log("imgUploadPath ${f.parentFile.parentFile.absoluteFile}")
|
||||
// logService.log("imgUploadPath ${f.parentFile.absoluteFile}")
|
||||
logService.log("imgUploadPath ${f.exists()}")
|
||||
logService.log("imgUploadPath ${f.absolutePath}")
|
||||
if (f.exists() == false) f.mkdirs()
|
||||
// 실제 이미지 저장 경로
|
||||
val imgUploadPath = (uploadPath + File.separator + uuid).toString() + "." + extension
|
||||
logService.log("imgUploadPath $imgUploadPath")
|
||||
File(imgUploadPath).parentFile.mkdirs()
|
||||
targetFile = File(imgUploadPath)
|
||||
if(targetFile.parentFile.exists() == false)targetFile.parentFile.mkdirs()
|
||||
|
||||
// 이미지 저장
|
||||
out = FileOutputStream(imgUploadPath)
|
||||
out.write(bytes)
|
||||
out.flush()
|
||||
|
||||
// ckEditor 로 전송
|
||||
printWriter = res.writer
|
||||
val callback = req.getParameter("CKEditorFuncNum")
|
||||
val fileUrl = "/blog/post/image/$uuid.$extension"
|
||||
// printWriter = res.writer
|
||||
// val callback = req.getParameter("CKEditorFuncNum")
|
||||
// val fileUrl = "/blog/post/image/$uuid.$extension"
|
||||
|
||||
printWriter.println(
|
||||
("<script type='text/javascript'>"
|
||||
+ "window.parent.CKEDITOR.tools.callFunction("
|
||||
+ callback + ",'" + fileUrl + "','이미지를 업로드하였습니다.')"
|
||||
+ "</script>")
|
||||
)
|
||||
|
||||
printWriter.flush()
|
||||
// printWriter.println(
|
||||
// ("<script type='text/javascript'>"
|
||||
// + "window.parent.CKEDITOR.tools.callFunction("
|
||||
// + callback + ",'" + fileUrl + "','이미지를 업로드하였습니다.')"
|
||||
// + "</script>")
|
||||
// )
|
||||
//
|
||||
// printWriter.flush()
|
||||
logService.log("imgUploadPath $imgUploadPath")
|
||||
logService.log("imgUploadPath ${File(imgUploadPath).exists()}")
|
||||
} catch (e: IOException) {
|
||||
@ -88,11 +110,17 @@ class BlogController() {
|
||||
} finally {
|
||||
try {
|
||||
out?.close()
|
||||
|
||||
printWriter?.close()
|
||||
} catch (e: IOException) {
|
||||
e.printStackTrace()
|
||||
}
|
||||
}
|
||||
val responce = ResponseEntity.ok().contentType(MediaType.APPLICATION_JSON).body(FileSaveResult().apply {
|
||||
|
||||
this.resultCode = lResultCode
|
||||
this.resultMsg = lResultMsg
|
||||
this.fileName = "$uuid.$extension"
|
||||
})
|
||||
return responce
|
||||
}
|
||||
}
|
||||
@ -4,7 +4,12 @@ import lombok.Getter
|
||||
|
||||
|
||||
@Getter
|
||||
class ResponceResult {
|
||||
open class ResponceResult {
|
||||
var resultCode: Int = 0
|
||||
var resultMsg: String? = null
|
||||
}
|
||||
|
||||
@Getter
|
||||
class FileSaveResult : ResponceResult() {
|
||||
var fileName : String? = null
|
||||
}
|
||||
@ -5,6 +5,8 @@
|
||||
layout:decorate="~{layout/default_layout}">
|
||||
|
||||
<th:block layout:fragment="head">
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<!-- TOAST UI Editor CDN(JS) -->
|
||||
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"/>-->
|
||||
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>-->
|
||||
@ -13,32 +15,50 @@
|
||||
<script type="text/javascript" src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
|
||||
<!-- TOAST UI Editor CDN(CSS) -->
|
||||
<link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css" />
|
||||
<link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor-dark.css" />
|
||||
<title>Spring Boot</title>
|
||||
<script th:inline="javascript">
|
||||
|
||||
let editor
|
||||
function onLoaded() {
|
||||
// const onChange = () => {
|
||||
// const editorHtml = editor.getHTML();
|
||||
// setHtml(editorHtml);
|
||||
// };
|
||||
const editor = new toastui.Editor({
|
||||
var h = document.querySelector('#content').getBoundingClientRect().height + 'px'
|
||||
editor = new toastui.Editor({
|
||||
el: document.querySelector('#editor'),
|
||||
previewStyle: 'vertical',
|
||||
previewStyle: 'tab',
|
||||
height: '500px',
|
||||
width:'100%',
|
||||
theme:'dark',
|
||||
usageStatistics : false,
|
||||
initialValue: "",
|
||||
toolbar:null,
|
||||
initialValue:
|
||||
"# 제목 " +"\n" +
|
||||
"평문 사이에 **볼드체** *이탤릭체*"+"\n" +
|
||||
"~~어디쓰지~~"+"\n" +
|
||||
"***"+"\n" +
|
||||
"### 모라모라 " +"\n" +
|
||||
"> 으흐흠..." +"\n" +
|
||||
"* 쓸까?" +"\n" +
|
||||
"1. 첫번째" +"\n" +
|
||||
"* [x] 체크하자" +"\n" +
|
||||
"* [ ] 체크하자" +"\n" +
|
||||
" \|dd\|cc\|ff\|\n" +
|
||||
" \|\-\-\-\|\-\-\-\|\-\-\-\|\n" +
|
||||
" \|aa\|s\|s\|" +"\n" +
|
||||
"[링크다](https://youtube.com)" +"\n" +
|
||||
"`var test = 'real test'`" +"\n" +
|
||||
"```\n" +
|
||||
"let test= = 'real test'\n" +
|
||||
"```"
|
||||
,
|
||||
initialEditType:"wysiwyg",
|
||||
// events : {
|
||||
// change : this.onChange
|
||||
// },
|
||||
hooks: {
|
||||
addImageBlobHook: (blob, callback) => {
|
||||
// blob : Java Script 파일 객체
|
||||
//console.log(blob);
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('file', blob);
|
||||
|
||||
let url = '/files/';
|
||||
let url = 'blog/post/images/';
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
enctype: 'multipart/form-data',
|
||||
@ -50,17 +70,10 @@
|
||||
cache: false,
|
||||
timeout: 600000,
|
||||
success: function (data) {
|
||||
//console.log('ajax 이미지 업로드 성공');
|
||||
url += data.fileName;
|
||||
fileIds += data.id + ",";
|
||||
// callback : 에디터(마크다운 편집기)에 표시할 텍스트, 뷰어에는 imageUrl 주소에 저장된 사진으로 나옴
|
||||
// 형식 : 
|
||||
callback(url, '사진 대체 텍스트 입력');
|
||||
},
|
||||
error: function (e) {
|
||||
//console.log('ajax 이미지 업로드 실패');
|
||||
//console.log(e.abort([statusText]));
|
||||
|
||||
callback('image_load_fail', '사진 대체 텍스트 입력');
|
||||
}
|
||||
});
|
||||
@ -68,6 +81,9 @@
|
||||
}
|
||||
});
|
||||
}
|
||||
function save() {
|
||||
console.log(editor.getMarkdown())
|
||||
}
|
||||
</script>
|
||||
<link th:href="@{/css/common.css}" rel="stylesheet" />
|
||||
<script type="text/javascript" th:src="@{/js/common.js}"></script>
|
||||
@ -75,12 +91,17 @@
|
||||
</th:block>
|
||||
<body onload="onLoaded()">
|
||||
<th:block layout:fragment="header" th:include="@{/fragments/header}"></th:block>
|
||||
<div layout:fragment='content' class='content' id='content'>
|
||||
<div id="editor">
|
||||
|
||||
</div>
|
||||
|
||||
<div layout:fragment='content' class='content' id='content' style="padding: 10px">
|
||||
<input id="title_layer" style="width:100%; height:50px; font-size:30px; border-width: 1px; align-content: center; margin: 10px"/>
|
||||
<div id="editor" style="width:90%; font-size:15px; border-width: 0px; align-content: center"></div>
|
||||
<div id="hashtag_layer">
|
||||
<select style="width:40%; height:30px; font-size:15px; border-width: 0px"> </select>
|
||||
<input id="hashtag" style="width:40%; height:30px; font-size:15px; border-width: 0px"/>
|
||||
</div>
|
||||
<div id="controll_layer" style="width: 100%">
|
||||
<button onclick="save()">asdsad</button>
|
||||
</div>
|
||||
</div>
|
||||
<th:block layout:fragment="footer" th:include="@{/fragments/footer}"></th:block>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user