layui富文本设置图片上传接口

文章 未结 6 9.35w
无法显示用户头像
作者:ECode1024官方,责任编辑:ECode1024官方 5 钻石
发布于 2019-04-30
layui富文本设置图片上传接口。 编写富文本JS [pre] //设置插入图片接口,注意:layedit.set 一定要放在 build 前面,否则配置全局接口将无效。 layedit.set({       uploadImage: {             url: 'upload/image/single' //接口url             ,type: 'POST' //默认post       } }); //创建编辑器 var editIndex = layedit.build('news_content', {   height: 600}); [/pre] 图片上传返回JSON数据Bean封装 [pre] /**   * Create by cinco on 2018-01-04.   * 图片上传成功后给LayEdit返回如下格式的JSON信息封装data子对象.   * 已省略掉构造方法和get/set方法.   */ public class Data {        //图片路径        private String src;          //图片标题        private String title; } [/pre] [pre] /**   * Create by cinco on 2018-01-04.   * 图片上传成功后给LayEdit返回如下格式的JSON信息封装.  * 已省略掉构造方法和get/set方法.  */ public class ImageUploadResult {        //结果码,0表示成功,其他失败        private Integer code;          //结果信息,上传失败后返回        private String msg;          //图片数据        private Data data; } [/pre] 图片上传接口Controller [pre] /**   * Create by cinco on 2018-01-04.   * 上传文件统一接口.   */ @RestController @RequestMapping("upload") public class UploadController {        @PostMapping("image/single")        public ImageUploadResult uploadImgSingle (@RequestParam("file") MultipartFile imgFile) {               System.out.println("原始图片名称:" + imgFile.getOriginalFilename());               ImageUploadResult result = new ImageUploadResult();               result.setCode(0);               result.setMsg(null);               result.setData(new Data( "/images/face.jpg", "测试" ));               return result;        } } [/pre] 写在末尾: layui富文本编辑器除了有图片上传功能,还有诸如超链接、图片表情等等。

声明:本文所有观点仅代表创作者本人,ECode1024系信息收集发布平台,ECode1024仅提供信息存储以及展示服务。若有侵权,请联系我们删除。
回复
推荐阅读
ECode1024 QQ交流群

打开手机QQ扫码加入 ECode1024 交流群

ECode1024 微信交流群

打开手机微信扫码关注 ECode1024 公众号