layui富文本编译器添加图片

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/487185.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

为什么数学是理解世界的最佳方式

来源&#xff1a;遇见数学在对着乔治梅森大学最近的一届新生致辞时&#xff0c;丽贝卡戈尔丁&#xff08;Rebecca Goldin&#xff09;传递了一个令人沮丧的数据&#xff1a;最近的一项研究显示&#xff0c;36%的大学生在大学四年时间里批判性思维并未显著提高。戈尔丁解释说&am…

windows查看dll库接口函数

一种是使用工具depends&#xff0c;另一种是使用vs的cmd命令窗口&#xff0c;dumpbin /EXPORTS xxx.dll就可以查看xxx.dll的函数接口了

bootstrap-table 行合并和列合并,以及固定列宽度等问题

列合并和列宽度固定&#xff1a; 1 .setWidth {2 table-layout: fixed;3 }4 5 .setWidth > thead > tr > th {6 width: 80px;7 }8 <table class"setWidth" id"EstateTable" data-mobile-responsive&…

c++错误functional:1526:9: error: no type named ‘type’ in ‘class std::result_of

关于这个错误&#xff0c;我自己的情况是thread函数形参有&引用传值&#xff0c;例如: void thread_test(vector<int> &test_vec)&#xff0c;编译就会报错&#xff0c;去掉&就可以了&#xff0c;查到的其他方式并没有能解决这个问题&#xff0c;不知道是因…

5G 标准的走向,为何越来越不同寻常?

作者 | Michael Koziol译者 | 弯月&#xff0c;责编 | 屠敏出品 | CSDN&#xff08;ID&#xff1a;CSDNnews&#xff09;以下为译文&#xff1a;如果没有互联网工程任务组&#xff08;Internet Engineering Task Force&#xff09;制定种种互联网标准&#xff0c;那么此时此刻你…

WebSocket教程(一)

一、websocket与http WebSocket是HTML5出的东西&#xff08;协议&#xff09;&#xff0c;也就是说HTTP协议没有变化&#xff0c;或者说没关系&#xff0c;但HTTP是不支持持久连接的&#xff08;长连接&#xff0c;循环连接的不算&#xff09; 首先HTTP有 1.1 和 1.0 之说&…

iis设置导致python调用urllib.request.urlopen出错问题

iis确实用的很少&#xff0c;从来没有注意过&#xff0c;今天就遇见了问题。 python中使用urllib.request.urlopen调用测试服务器接口&#xff0c;之前从没有出现问题&#xff0c;今天用了一条70M的数据进行测试&#xff0c;突然报错404&#xff0c;这是什么鬼&#xff0c;各种…

人类智慧的本质是什么?【知社视频】第118期

来源&#xff1a;知社学术圈自古希腊开始&#xff0c;人们就认为智慧是人的根本属性&#xff0c;哲学家普罗泰戈拉有句名言&#xff0c;“人是万物的尺度&#xff0c;是存在的事物存在的尺度&#xff0c;也是不存在的事物不存在的尺度”。马克思主义也认为&#xff0c;认识世界…

scrapy的安装

1. 先安装python3 2. 设置python3的环境变量&#xff0c;script的环境变量 3. pip3 install scrapy 4. 安装错误提示去ms官网下载vc2015 5. 安装pywin32 pywin32-221.win-amd64-py3.6 安装完成&#xff01;&#xff01; 转载于:https://www.cnblogs.com/liyugeng/p/7941102.ht…

nginx小记

这只是个小记&#xff0c;不是很懂&#xff0c;随手记录已知的知识。 1.nginx是为了让外部网络可以访问内部系统&#xff0c;做了ip和端口的映射&#xff0c;所以如果是内部使用&#xff0c;可以直接连接内部ip和端口&#xff0c;而不用非要使用nginx映射的。 &#xff08;有新…

20个!中国科协发布2020年重大科学问题和工程技术难题

来源&#xff1a; 中国科学报作者 | 高雅丽8月15日&#xff0c;中国科协在第二十二届中国科协年会闭幕式上发布了 10个对科学发展具有导向作用的科学问题和10个对技术和产业具有关键作用的工程难题。10个前沿科学问题为&#xff1a;冠状病毒跨种传播的生态学机制是什么&#xf…

openvino安装小记

使用的是Linux版本安装完整包l_openvino_toolkit_p_2019.2.242.tgz&#xff0c;这个是官方安装说明&#xff1a;https://docs.openvinotoolkit.org/latest/_docs_install_guides_installing_openvino_linux.html。 简单记录一下问题&#xff1a; 1.使用xmanager想要用GUI脚本…

Java 8特性

1. Java8的新特性 1.1. Lambda表达式和函数式接口 最简单的Lambda表达式可以用逗号分隔的参数列表、->符号和功能语句块来表示。示例如下&#xff1a; Arrays.asList( "a", "b", "d" ).forEach( e -> System.out.println( e ) ); 请注意到…

图神经网络的表达能力,究竟有多强大?

来源&#xff1a;AI科技评论作者 | Mr Bear编辑 | 丛 末近年来&#xff0c;随着图神经网络在各个领域的火热应用&#xff0c;越来越多的学者试图从图论的角度对图神经网络的表达能力进行理论分析&#xff0c;并基于这些理论分析开发出了性能强大的模型。然而&#xff0c;在实际…

android studio 调试c/c++代码小记

使用的android studio3.0.1版本&#xff0c;sdk 27. 新建的测试程序&#xff0c;勾选了c支持&#xff0c;默认有native_lib.cpp。 1.在cpp中添加了测试的native代码&#xff0c;提示No implementation found for错误&#xff0c;怎么看都跟之前的默认函数没啥区别啊&#xff…

在Mac(OS X)中使用GitHub的超详细攻略(20170706)

转自&#xff1a;http://blog.csdn.net/baimafujinji/article/details/74533992 GitHub是一个面向开源及私有软件项目的托管平台、开源代码库以及版本控制系统&#xff0c;因为只支持 Git 作为唯一的版本库格式进行托管&#xff0c;故名 GitHub。通常在Windows下使用GitHub的教…

低时延AI完美适配工业场景,边缘智能如何构建数字工业新生态?

物联网智库 原创二次转载请联系原作者今年年初爆发的新冠疫情迫使居民的生活、学习、工作由线下向线上大规模迁移&#xff0c;令各行各业意识到了数字化升级的重要性&#xff0c;纷纷踏上转型之路。联网设备数量也随着物联网技术的快速发展而不断飙升&#xff0c;越来越多的应用…

AndroidStudio 3.4更新了啥?(转载)

版权声明&#xff1a;本文为原博主收集的资料&#xff0c;欢迎参考。未经本人允许&#xff0c;禁止转载。 原博文地址&#xff1a;https://blog.csdn.net/z302766296/article/details/89468726 每次到AndroidStudio新版本发布的时候&#xff0c;都忍不住想更新一波&#xff0c;…

lintcode12 带最小值操作的栈

实现一个带有取最小值min方法的栈&#xff0c;min方法将返回当前栈中的最小值。 你实现的栈将支持push&#xff0c;pop 和 min 操作&#xff0c;所有操作要求都在O(1)时间内完成。 建一个栈helpStack&#xff0c;用来存放从开始到目前位置的最小值&#xff0c; 1 /**2 * lintc…

python使用的一些小事儿

简单的记录一些使用的小事儿&#xff0c;大神可能都知道&#xff0c;给自己这样的python新手使用。 1.os.path.realpath(__file__)&#xff1a;获得当前文件路径 2.os.path.dirname(os.path.realpath(__file__))&#xff1a;获得当前文件的所在目录&#xff0c;每多一层os.pa…