kindeditor 上传图片后端成功了,web显示上传失败 ,已解决

article/2025/9/23 11:52:02

别人是什么都懂,然后写上代码教大家怎么做,而我只是一个被自己蠢哭的啥都不会的yang

今天我就来告诉大家,被自己蠢哭是啥意思

  • springboot实现图片上传,我以前不知道原来是有kindeditor这个html在线编辑器
    大概长这样,这只是部分截图啊,红圈那个就是多图片上传的按钮
    在这里插入图片描述
  • 尽然有这个,那就引入被
    http://kindeditor.net/demo.php

要在页面实现上面的样子,首先你要在XXXX.html里面引入textare俗称富文本编辑,代码如下:

 <div class="form-group"><textarea id="editor" style="width: 100%; height: 650px;"th:utext="${info!=null and info.DetailContent !=null}?${info.DetailContent}: ''"></textarea></div>

然后就是在upFile.js中这样写

KindEditor.ready(function(K){editor = K.create("textarea[id='editor']",{resizeType : 1,allowPreviewEmoticons: false,allowImageUpload:true,//允许上传图片allowFileManager:true, //允许对上传图片进行管理uploadJson:  '/admin/upload/file', //上传图片的java代码fileManagerJson: '/admin/upload/file',afterUpload: function(){this.sync();}, //图片上传后,将上传内容同步到textarea中afterBlur: function(){this.sync();},   失去焦点时,将上传内容同步到textarea中items : ['fontname','fontsize', '|','forecolor', 'hilitecolor','bold', 'italic','underline','removeformat','|', 'justifyleft','justifycenter', 'justifyright','insertorderedlist','insertunorderedlist','|', 'emoticons','link','media','|','multiimage', 'table', 'baidumap'],filePostName:'file'});
}

然后就是controller.java了

 @PostMapping({"/upload/file"})@ResponseBodypublic ApiResult upload(HttpServletRequest httpServletRequest, @RequestParam("file") MultipartFile file) throws URISyntaxException {String fileName = file.getOriginalFilename();String suffixName = fileName.substring(fileName.lastIndexOf("."));//生成文件名称通用方法SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd_HHmmss");Random r = new Random();StringBuilder tempName = new StringBuilder();tempName.append(sdf.format(new Date())).append(r.nextInt(100)).append(suffixName);String newFileName = tempName.toString();File fileDirectory = new File(Constants.FILE_UPLOAD_DIC);//创建文件,这里Costants是一个常量配置的java文件,FILE_UPLOAD_DIC是自定义地址eg:'D:\\upload\\'File destFile = new File(Constants.FILE_UPLOAD_DIC + newFileName);try {if (!fileDirectory.exists()) {fileDirectory.getParentFile().mkdir();if (!fileDirectory.mkdir()) {throw new IOException("文件夹创建失败,路径为:" + fileDirectory);}}file.transferTo(destFile);//这里是json格式的东西,你也可以返回一个实体,网上方法挺多的ApiResult resultSuccess = ResultGenerator.genSuccessResult();resultSuccess.setData(JrunningUtils.getHost(new URI(httpServletRequest.getRequestURL() + "")) + "/api/public/images/" + newFileName);System.out.println("图片上传成功");return resultSuccess;} catch (IOException e) {e.printStackTrace();return ResultGenerator.genFailResult("文件上传失败");}}
  • 然后就是启动项目了
    在这里插入图片描述
    问题解决来了
    点完开始上传。然后就成这样了
    在这里插入图片描述
    一看后端控制台,sout输出的“图片上传成功”也在啊。
    看了一下kindEditor-all.js
    在这里插入图片描述
    看了我的ResultGenerator.genFailResult返回的json没有err啊
    然后我就改成这样了
    在这里插入图片描述
    再启动,我mmp,一天了终于出来了
    在这里插入图片描述
    在这里插入图片描述

心情美美哒,然后CSDN记录一下


http://chatgpt.dhexx.cn/article/AO041P4p.shtml

相关文章

springboot中kindeditor 上传图片及其富文本的使用

话不多少&#xff0c;直接进入话题。 首先需要在前端页面中引入kindeditor 库 <script src"../js/kindeditor-all.js"></script>标注黄色的是重点&#xff0c;必须引入 其次写前端代码,注意我这个前端代码是springboot推荐的themleaf写的&#xff0c;其…

kindEditor的上传图片点击没反应,bug修复

基于layui的bug的层级问题 修改kindeditor.js中的811213全部替换为19892000 811212替换为19891999 811214替换为19892001 811211替换为19891998 基于电脑的显示问题x&#xff0c;y的坐标没有取整&#xff0c;有小数点不识别的问题 修改kindeditor.js中x&#xff0c;y的取整&am…

kindeditor 上传图片失败问题总结

1.近段时间一直在处理kindeditor上传图片失败的问题&#xff0c;前期一直以为是前端的问题&#xff0c;利用谷歌控制台&#xff0c;打断点&#xff0c;修改方法&#xff0c;一直都找不到解决方案&#xff0c;直到查看服务器配置&#xff0c;才发现&#xff1a; WEB 1号服务器 /…

KindEditor上传图片和修改图片

1.首先就是下载KindEditor&#xff08;这里是官网的地址&#xff09; 2. 部署编辑器 解压 kindeditor-x.x.x.zip 文件&#xff0c;将所有文件上传到您的网站程序目录里&#xff0c;例如&#xff1a;http://您的域名/editor/ Note 您可以根据需求删除以下目录后上传到服务器。…

kindeditor php 上传错误,kindeditor 上传图片失败,该怎么解决

本帖最后由 nxgg8 于 2014-05-29 12:44:04 编辑 编辑器版本&#xff1a;KindEditor 4.1.10 php框架&#xff1a;ThinkPHP3.2.2 这是html页面中引用编辑器配置 上传图片的时候出问题,不管是单张图片&#xff0c;还是批量。都会提示以下信息&#xff0c;返回的图片路径是正确的&a…

Kindeditor的简单使用以及图片上传

详细的笔者也不是特别懂&#xff0c;但是基本的使用还是会的 首先到官网下载相应的插件http://kindeditor.net/down.php&#xff0c;下载完的文件打开后是这样的&#xff0c;看着有点多 但是我们只取出需要的&#xff0c;只有这么一点&#xff0c;复制到项目下&#xff0c;取名…

KindEditor上传图片及使用

本文为原创&#xff0c;只为互相学习&#xff01; 主页:写程序的小王叔叔的博客欢迎来访&#x1f440; 支持:点赞收藏关注 社区:JAVA全栈进阶学习社区欢迎加入​​​​​​​ 编辑器使用 1&#xff09;官网&#xff1a;在线HTML编辑器 2&#xff09;使用 如果在编辑器中&#…

KindEditor上传本地图片

自己动手配置了一下KindEditor文本编辑器上传本地图片的功能&#xff0c;不需要动手写action&#xff0c;相关详细配置和代码如下。 我用的是KindEditor 4.1.10的版本&#xff0c;需要用到的童鞋去下载对应的版本。 1.↓↓↓这个插件里面需要手动配置的两个重要的jsp文件。 …

kindeditor4.1.10图片上传配置及使用说明

1效果展示 1.1 点击图片上传按钮 1.2 弹出选择框,可以从已上传的图片中选择上传,也可以从本地上传。 1.3选择从图片空间上传,文件夹模式浏览所有已上传的图片 1.4从本地选择图片上传 1.5上传效果 1.6 上传路径: WebRoot/upload/image 2-1:kindeditor-4.1.10版本插件 2-2:…

onpaste事件的浅谈

今天看书的时候&#xff0c;偶然看到onpaste的这个属性所以记录下来&#xff0c;为以后查阅而用&#xff1a; 具体的用法是<input type“text” οnpaste"function ***"/>&#xff0c;标签只是用来做说明并不是非得是input标签 虽然是触发的条件是&#xff1…

手机html粘贴事件,详解浏览器中的粘贴事件 paste onpaste 事件

在最新的H5 API里已经有了对粘贴事件的支持, 事件名为paste, 平时用的较少,但最近想做一个粘贴板管理器,于是就调研了一下这个粘贴,复制事件. 那么调研的第一步是什么那? 当然是百度了,但高手都不百度,直接控制台调试 创建一个id为editor的文本域, 为其添加一个paste事件的…

onkeyup事件,onpaste事件,完成实时表单验证

先上效果图&#xff1a; input框&#xff0c;用户输入值的方式就两种&#xff0c;一种是键盘输入&#xff0c;一种是鼠标粘贴。onkeyup事件可以在键盘输入的时候绑定事件&#xff0c;onpaste"return false"&#xff0c;设置不允许粘贴。 onkeyup进行表单验证的优…

利用JavaScript从剪贴板获取图片并上传服务器

1、参考&#xff1a; 使用 JavaScript File API 实现文件上传FileReader.readAsDataURL()基于Servlet3的文件上传中的示例2&#xff1a;基于JQuery的单文件上传 2、onpaste 剪贴板事件 onpaste 事件在用户向元素中粘贴文本时触发。有三种方式可以在元素中粘贴内容&#xff1…

Internet协议的安全性

网际层 安全问题 1.IP数据报在传递过程中被窃取 措施&#xff1a;读ip数据报进行加密 2.数据净荷可能被截取后修改 措施&#xff1a;对ip数据净荷进行完整性检测 3. 攻击者发送伪造源地址数据包欺骗接收者&#xff0c;也称为ip欺骗 措施&#xff1a;对数据包的源地址鉴别 4. A…

winget InternetOpenUrl() failed. 0x80072f7d

今天使用 winget 安装东西的时候提示&#xff1a; 尝试更新源时失败&#xff1a; winget 执行此命令时发生意外错误&#xff1a; InternetOpenUrl() failed. 0x80072f7d : unknown error对于我而言是因为其他原因关闭了 tls 1.2&#xff0c;在控制面板->网络和 Internet-&g…

Internet网际协议 --- IP地址

IP地址 一.IP地址简介二.分类IP地址三.IP子网划分与子网掩码四.无类域间路由CIDR五.路由聚合六.IP包转发 一.IP地址简介 1.IP地址&#xff0c;网络上的每一台主机&#xff08;或路由器&#xff09;的每一个接口都会分配一个全球唯一的32位的标识符。 2.将IP地址划分为固定的类…

HTTP-web-Internet

互联网&#xff08;Internet&#xff09; 互联网&#xff1a;将全球计算机互联在一起的网络。目前最流行的实现协议是TCP/IP。 万维网&#xff08;WWW&#xff09; 万维网&#xff1a;基于HTTP协议实现全球性、动态交互、跨平台的分布式图形信息系统。是互联网上应用最为广泛的…

internet协议

1&#xff1a;引言 IP时TCP/IP中的核心协议IP提供了一种尽力而为&#xff0c;无连接的数据报交付服务 2&#xff1a;IP头部 正常的IPV4头部大小为20字节。除非存在选项&#xff08;少见&#xff09;IPV6的长度是40字节&#xff0c;没有选项字段&#xff0c;IPV6有扩展头部 …

Internet网际协议---IPv4协议

IPv4协议 一.IPv4协议简介二.IPv4数据报格式&#xff08;由首部和数据组成&#xff09;三.数据报分片与重组四.IP协议功能及报头字段总结 一.IPv4协议简介 1.IPv4协议&#xff1a;网际协议版本4&#xff0c;一种无连接的协议&#xff0c;是互联网的核心&#xff0c;也是使用最…

网络Internet

前言 加油 原文 网络常用会话 ❶ This online store discounted all computers for sale. 该网店削价出售全部待售的电脑。 ❷ The latest laptop is very portable. 最新的这款笔记本很便携。 ❸ Add up the figures in this column. 把这一栏的数字合计一下。 ❹ Consu…