nodejs项目使用CKEditor上传图片

CKEditor上传图片问题

ckeditor是一款比较热门的html可视化编辑器,很多项目都会使用这个插件,其中有一个很常用的功能,就是上传图片

前段时间事件,公司产品人员近告知,系统中有一个通知消息编辑功能不能上传图片,根据老员工告诉我,这个通知编辑功能中使用CKEditor插件来编辑消息模板
在这里插入图片描述
在这里插入图片描述

在CKEditor中点击图片按钮,再点击上传,选择文件,上传到服务器;但是每次上传都会失败,于是一路看代码,找到CKEditor的使用地方,(至于使用方法,建议大家查看官方文档,或者百度)
在这里插入图片描述
在这里可以看到,插件使用了一个配置文件,于是查看配置文件内容
在这里插入图片描述
filebrowserUploadUrl和filebrowserImageUploadUrl分别是文件上传路径和图片上传路径,这里主要针对图片上传路径,
在这里插入图片描述
在这里插入图片描述
在这里找到上传图片的方法,查看报错,发现每次都是file.path报错,并且是因为file找不到,
在这里插入图片描述

于是各种百度,最终在官方文档中看到一段话
在这里插入图片描述
官方链接:https://ckeditor.com/docs/ckeditor4/latest/guide/dev_file_upload.html
意识就是说文件上传的默认请求是一个带有“upload”字段的表单数据文件。
所以问题很明显了,代码中的file字段不在files.file中,而在在files.upload,
修改了一下,再次上传,发现文件上传成功了,但是url确没有回显
在这里插入图片描述
于是,在网上各种百度,发现大部分解决方案都是针对java端的,(其实我就是java开发,只不过现在这个项目是nodejs)
于是套用java端的解决方案,(网上大部分都是)
String resp ="<script type=“text/javascript”>window.parent.CKEDITOR.tools.callFunction(" + funNum + “,’” + imgpath + “’,’’)”;
response再wirte这个script什么的,但是却没用,于是查看自己nodejs代码的返回值问题
在这里插入图片描述
发现返回值是一个json对象,然后数据在data属性中,但是查看官方文档
在这里插入图片描述
在这里插入图片描述

发现返回值有一个格式,于是去掉自己系统中原有的封装的参数,使用官方的参数格式
在这里插入图片描述
再次上传测试,发现url自动回显,然后图片预览也有了,确定直接可用
在这里插入图片描述
再给大家看一下浏览器响应的内容
在这里插入图片描述
至于我代码中的image对象,可以根据自己的上传业务逻辑去封装。
在nodejs中使用ckeditor上传图片问题就解决了,总结一下就是官方文档很重要。

猜你喜欢

转载自blog.csdn.net/pjw1217/article/details/111150545