layui富文本編譯器添加圖片

一、建立富文本編輯器

    <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>

二、js

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

三、controller

@PostMapping("/upload")
    @ResponseBody
    public 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);//圖片url
            map2.put("title",extName);//圖片名稱，這個會顯示在輸入框裏
            String result = new JSONObject(map).toString();
            return result;
    }

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

注意：

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

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

③ 第 55 行的是圖片的 url，/ 表示根目錄，會自動加上 域名的，你們可根據本身狀況修改

④ 第 59-66 行代碼是生產 以 Map 方式 建立JSON，最終返回給 前臺

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