1、创建富文本编辑器

    <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;//上传图片,必须放在 创建一个编辑器前面layedit.set({uploadImage: {url: '${pageContext.request.contextPath}/uploadFile' //接口url,type: 'post' //默认post
                   }});//创建一个编辑器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 里配置静态资源虚拟映射(即55行的路径,/uploads ),才能在浏览器里访问图片

② 图片上传,以 年/月/文件名 形式储存,其中文件名是按时间自动命名

③ 第 55 行的是图片的 url,/ 表示根目录,会自动加上 域名的,大家可根据自己情况修改

④ 第 59-66 行代码是生产 以 Map 方式 创建JSON,最终返回给 前台

这里的 JSON,layui 是有要求的,如图

转载于:https://www.cnblogs.com/NCL--/p/7927669.html

layui富文本编译器添加图片相关推荐

  1. ios html富文本带图片,iOS 富文本文字添加图片

    如图:标题前面添加海外直邮和跨境保税,iOS最好使用富文本添加图片附件的方法 NSTextAttachment*textAttachment = [[NSTextAttachment alloc] i ...

  2. 富文本编辑器添加图片

    使用 cursor->insertImage()插入图片 QTextImageFormat(图片格式) 内联图像由 Unicode 值 U+FFFC(对象替换字符)表示,该值具有关联的 QTex ...

  3. 功能需要富文本编译器图片不转base64,琢磨了一下,上代码

    editor = new E('#div1');// 编辑器高度editor.config.height = 300;// 图片转base64(开这个是因为关闭,是因为文件上传窗口也会关闭)edito ...

  4. layui富文本编辑器上传图片java_解决layui富文本编辑器图片上传无法回显的问题...

    layui富文本编辑器用起来挺方便的,但是不足的是不提供图片上传的接口,需要自己写上传接口,而且返回的数据类型要符合layui富文本编辑器图片上传插件的要求,否则图片可以上传成功,但是无法回显,这个问 ...

  5. layui富文本编辑器图片上传无法回显问题解决

    layui富文本编辑器用起来挺方便的,但是不足的是不提供图片上传的接口,需要自己写上传接口,而且返回的数据类型要符合layui富文本编辑器图片上传插件的要求,否则图片可以上传成功,但是无法回显,这个问 ...

  6. 富文本编译器UEditor+SSM的使用

    下载ueditor-jsp版的资源包,解压并放到webapp目录下 在要引入的jsp页面引入js文件 注*:不用引入css文件 <script src="<c:url value ...

  7. kindeditor富文本编译器

    kindeditor富文本编译器 1.引入js文件 <script src="~/assets/plugins/kindeditor/kindeditor-all.js"/& ...

  8. php 给富文本里的图片增加ALT、TITLE属性

    php 给富文本里的图片增加ALT.TITLE属性 $text = '内容<img src="http://www.test.com/test1.jpg">内容'; $ ...

  9. 富文本中添加字体选项功能_扑中的字体功能

    富文本中添加字体选项功能 A little extra help for styling your text 样式设置方面的一些额外帮助 I recently learned about a litt ...

最新文章

  1. java中的分页 效率考虑_面试官:数据量很大,分页查询很慢,有什么优化方案?...
  2. python bottle框架 重定向_Python的web框架bottle静态文件的路径
  3. java 1.7 hashmap源码_jdk1.7hashMap源码分析
  4. FinTech专题:支付平台建设资金底线防火墙的杀手级设计方案
  5. 从控制台读取password - C#
  6. 【Nodejs开发】第2章 网站首页的布局
  7. Delphi中常用字符串处理函数
  8. 卡巴斯基离线升级方法图解
  9. 软考-架构师-第六章-开发方法 第二节 软件开发模型(读书笔记)
  10. 刀与剑-C++ COM组件调用
  11. ie11加载项启用不了 java,IE11网页加载项和控件不能运行怎么办
  12. 暗战 惠普再掀市场风云
  13. android多开器工作原理,[原创]app隐藏大师绕过密码与多开分析
  14. AlipayHK拿下香港港铁,背后是蚂蚁金服出海造船的阳谋
  15. 搭建配置私服-nexus ,Maven中的使用——3
  16. ubuntu 18.04 install tensorflow-nightly-gpu and tfp-nightly
  17. Android方向传感器
  18. 8086的两种工作模式_8086系统中最小模式与最大模式两种工作方式的主要区别是什么?...
  19. lyx安装(需先安装texlive)2021-03-14
  20. no implicit conversion of nil into String

热门文章

  1. Android系统中的进程管理:进程的优先级
  2. 关于intent-filter的误区
  3. 分享到facebook链接原格式_神马?!你还不知道Facebook广告怎么操作?
  4. c语言中指针数组赋值字符串,C语言—用结构体指针给数组赋值(结构体指针指向字符串,给字符串赋值)...
  5. php处理heic格式图片,iPhone 照片为heic格式怎么处理?
  6. 将null转换成数组_把数组里面的值为 null 的转换为字符串 - - ,你们的方法都是什么呢?...
  7. TensorRT学习笔记3 - 运行sampleMNIST
  8. 美元汇率pascal程序
  9. POJ 2352 Stars (线段树)
  10. rhel6上使用udev配置oracle asm,Red Hat Enterprise Linux 6使用udev配置Oracle ASM总结文档