上传富文本到oss 在富文本中调回

fengxuebing · fengxuebing · commit 215380730cfc · 2023-05-26T16:51:40.000+08:00
diff --git a/springboot-upload/src/main/java/com/upload/kss/controller/PageController.java b/springboot-upload/src/main/java/com/upload/kss/controller/PageController.java
@@ -13,4 +13,10 @@ public String upload(){
         return "upload";
     }
 
+
+    @GetMapping("/editor")
+    public String editor(){
+        return "wangeditor";
+    }
+
 }
diff --git a/springboot-upload/src/main/java/com/upload/kss/controller/UploadController.java b/springboot-upload/src/main/java/com/upload/kss/controller/UploadController.java
@@ -13,6 +13,7 @@
 import javax.servlet.http.HttpServletRequest;
 import java.io.IOException;
 import java.util.Collections;
+import java.util.HashMap;
 import java.util.Map;
 import java.util.Objects;
 
@@ -41,5 +42,25 @@ public String  upload(@RequestParam("file")MultipartFile multipartFile, HttpServ
 
     }
 
+    // 上传富文本到oss 并调回
+    @PostMapping("/upload/oss")
+    @ResponseBody
+    public Map<String,Object>  uploadOss(@RequestParam("file")MultipartFile multipartFile, HttpServletRequest request){
+        if (multipartFile.isEmpty()){
+            return Collections.singletonMap("error","文件为空");
+        }
+        long size = multipartFile.getSize();
+        String dir = request.getParameter("dir");
+        // return uploadService.uploadIMG(multipartFile, dir);
+        try {
+            Map<String, Object> map = new HashMap<>();
+            map.put("url", ossUploadService.uploadFile(multipartFile, dir));
+            return map;
+        } catch (Exception e) {
+            throw new RuntimeException(e);
+        }
+
+    }
+
 
 }
diff --git a/springboot-upload/src/main/resources/application-dev.yml b/springboot-upload/src/main/resources/application-dev.yml
@@ -1,4 +1,8 @@
 file:
   staticPath: http://localhost:8777
   staticPatternPath: /upimage/**
-  uploadFolder: D:/mysoft/temp/
+  uploadFolder: D:/mysoft/temp/
+spring:
+  freemarker:
+    settings:
+      classic_compatible: true
diff --git a/springboot-upload/src/main/resources/templates/wangeditor.html b/springboot-upload/src/main/resources/templates/wangeditor.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>upload image demo</title>
+    <link href="https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet">
+    <link href="./css/view.css" rel="stylesheet">
+    <link href="./css/editor.css" rel="stylesheet">
+    <link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">
+</head>
+
+<body>
+<p>
+    Upload image
+</p>
+
+<div>
+    <div id="editor-toolbar" class="editor-toolbar"></div>
+    <div id="editor-text-area" class="editor-text-area"></div>
+</div>
+
+
+<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+<script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
+<script>
+    const E = window.wangEditor
+
+    // Change language
+    const LANG = location.href.indexOf('lang=en') > 0 ? 'en' : 'zh-CN'
+    E.i18nChangeLanguage(LANG)
+
+    const editorConfig = { MENU_CONF: {} }
+    editorConfig.MENU_CONF['uploadImage'] = {
+        server: '/upload/oss',
+        // server: '/api/upload-img-10s', // test timeout
+        // server: '/api/upload-img-failed', // test failed
+        // server: '/api/xxx', // test 404
+
+        timeout: 5 * 1000, // 5s
+
+        fieldName: 'file',
+        meta: {dir: 'bbs'},
+        metaWithUrl: true, // join params to url
+        headers: { Accept: 'application/json' },
+
+        maxFileSize: 10 * 1024 * 1024, // 10M
+
+        base64LimitSize: 5 * 1024, // insert base64 format, if file's size less than 5kb
+
+        onBeforeUpload(file) {
+            console.log('onBeforeUpload', file)
+
+            return file // will upload this file
+            // return false // prevent upload
+        },
+        onProgress(progress) {
+            console.log('onProgress', progress)
+        },
+        onSuccess(file, res) {
+            console.log('onSuccess', file, res)
+        },
+        onFailed(file, res) {
+            alert(res.message)
+            console.log('onFailed', file, res)
+        },
+        onError(file, err, res) {
+            alert(err.message)
+            console.error('onError', file, err, res)
+        },
+
+         customInsert(res, insertFn) { // JS 语法
+            // res 即服务端的返回结果
+            alert("调回来了"+res.toString())
+            // 从 res 中找到 url alt href ，然后插入图片
+            insertFn(res.url)
+        },
+
+    }
+
+    const editor = E.createEditor({
+        selector: '#editor-text-area',
+
+        config: editorConfig
+    })
+
+    const toolbar = E.createToolbar({
+        editor,
+        selector: '#editor-toolbar',
+        // config: {}
+    })
+</script>
+</body>
+
+</html>

Original file line number	Diff line number	Diff line change
`@@ -13,4 +13,10 @@ public String upload(){`
`13`	`13`	`return "upload";`
`14`	`14`	`}`
`15`	`15`
	`16`	`+`
	`17`	`+ @GetMapping("/editor")`
	`18`	`+ public String editor(){`
	`19`	`+ return "wangeditor";`
	`20`	`+ }`
	`21`	`+`
`16`	`22`	`}`