wangeditor上传图片踩坑注意事项

最新推荐文章于 2024-08-16 17:10:24 发布

上官土豆

最新推荐文章于 2024-08-16 17:10:24 发布

阅读量1.6w

点赞数 1

文章标签： wangEditor 富文本编辑器上传图片

本文链接：https://blog.csdn.net/weixin_40001340/article/details/82925162

版权

今天使用了wangeditor这个小的轻量富文本编辑器，本以为这样简易的插件，api写的也较为详尽，简洁易懂，应该使用过程不会遇到麻烦，轻而易举便能完成。没想到使用图中却频繁踩坑。对此进行总结，希望给自己一个经验，和使用wangEditor中遇到问题的朋友能快速解决。

1.图片上传大小的限制和上传时间限制

editor.customConfig.uploadImgTimeout = 50000;

图片上传时间限制一定要设置够大，我一开始设置为5000，以为已经足矣，结果每次上传图片后，客户端的返回状态都是cancel,因为我对自己设置的时间有自信，所以一开始没想到这的问题，找了半天原因，最后回去把时间加了个0。OK了，

2.在tomcat server.xml中添加 disableUploadTimeout="false"，我的是在<Connector中手动添加上去的如下：，网上还有说在server.xml中不同地方添加disableUploadTimeout="false"，总之是控制返回时间的，不然客户端等待时间过长会报404，之前就是因为这个问题我的图片明明上传成功，但前段状态一直返回404。

3.配置tomcat的映射路径，在<Host></Host>z中添加 <Context path="/image" docBase="D:\image" reloadable="true" /> ，

这样做的好处是将实际的D:\image路径映射成tomcat下的/image路径，当你启动服务器时，访问http://localhost:8080/image/1538452726500.jpg,就能访问到你实际保存在D:\image下的文件，path="/image"/中的image可以自己随便起名，1538452726500.jpg是我的D盘下\image下的文件。

在IDEA中，你在项目中使用Tomcat的时候，需要将Deploy applications configured in Tomcat instance这个选项勾选，这样我们上面的配置才会生效。

4.另外要记得按wangEditor文档中的方式返回json,或者返回非json的数据也要按文档中给的返回非json数据得接口来调用，这里的实例有很多，大家去网上一搜就有吗、，我就不过多废话了