1、創(chuàng)建富文本編輯器

<form class="layui-form" method="post" id="myForm" enctype="multipart/form-data"><div class="layui-form-item layui-form-text"><label class="layui-form-label">內容</label><div class="layui-input-block"><textarea class="layui-textarea layui-hide" name="content" lay-verify="content" id="content"></textarea></div></div></form>

2、js

<script>layui.use(['form', 'layedit', 'laydate'], function() {var form = layui.form, layer = layui.layer, layedit = layui.layedit, laydate = layui.laydate;//上傳圖片,必須放在 創(chuàng)建一個編輯器前面layedit.set({uploadImage: {url: '${pageContext.request.contextPath}/uploadFile' //接口url,type: 'post' //默認post }});//創(chuàng)建一個編輯器var editIndex = layedit.build('content',{height:400});});</script>

3、controller

@PostMapping("/upload")@ResponseBodypublic String upload(@RequestParam("file") CommonsMultipartFile file) throws Exception {FastDFSClient client = FastDFSClient.getClient();//開啟服務String extName = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(".")+1);String path = client.uploadFile(file.getBytes(),extName,null);//獲取路徑logger.debug("上傳文件demo===============================,文件服務器路徑"+path);Map<String,Object> map = new HashMap<String,Object>();Map<String,Object> map2 = new HashMap<String,Object>();map.put("code",0);//0表示成功，1失敗map.put("msg","上傳成功");//提示消息map.put("data",map2);map2.put("src",file_server+path);//圖片urlmap2.put("title",extName);//圖片名稱，這個會顯示在輸入框里String result = new JSONObject(map).toString();return result;}

將信息返回，前臺就收即可

注意：

① 博主這里文件是上傳到本地的?/Users/liuyanzhao/Documents/uploads/ 目錄，大家自行修改。待會兒還要在 Tomcat 或者 IDE 里配置靜態(tài)資源虛擬映射(即55行的路徑，/uploads )，才能在瀏覽器里訪問圖片

② 圖片上傳，以 年/月/文件名 形式儲存，其中文件名是按時間自動命名

③ 第 55 行的是圖片的 url，/ 表示根目錄，會自動加上 域名的，大家可根據自己情況修改

④ 第 59-66 行代碼是生產 以 Map 方式 創(chuàng)建JSON，最終返回給 前臺

這里的 JSON，layui 是有要求的,如圖

轉載于:https://www.cnblogs.com/NCL--/p/7927669.html

總結

以上是生活随笔為你收集整理的layui富文本编译器添加图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。