使用百度ueditor实现图片上传和视频上传(自定义路径)
2018-04-04 本文已影响3106人
Hush____
前一阵子开发了一个信息发布的系统,其中发布模块就涉及到了发布信息的编辑,尤其是其中的图片上传和视频上传功能。查阅了很多资料,有需要改jar包的,有需要各种配置的,一路看下来,不是很方便和很清晰。所有写了这篇,一方面是自己记录下,二是给有需要的人参考一下。
进入主题,首先我们去到ueditor的官网,下载最新版的。(自己用的是jsp的utf-8版)


1⃣️我们把下载好的文件,放到静态资源下面,我就是改了下名字。

2⃣️前段,需要的页面引入这个如下的css和js。



注:其实,ueditior有自己的一套上传方式,就是上传到tomcat的编译文件目录下,这种方式在项目重新部署或者tomcat启停的时候,会将上传的文件丢失。手动拷贝出来,再放进去,这种方式肯定是非常不合适的。(这种方式只要改下配置文件 就行了,很简单)
既然标题为上传到指定文件目录,那么我们这篇肯定是可以指定文件存放的目录的。所以就涉及到自己写一套后台的上传方法和返回方法。
3⃣️js中,我们需要先实例化编辑器,在通过ueditor提供的方法,请求后台。

4⃣️请求到后台,uploadImage方法供参考,其中用到了multipartResolver处理器的类需要在mvc中配置下。(或者也可以不用这个类,写一个纯io的上传方法,这都是可以的)

注:ReturnUploadImage这个类是按照前端ueditor的需求方式返回的。

到这,其实就可以通过ueditor开始上传图片和视频了。(测试ok的)
但是你会发现不能显示出来,上传成功却没有显示出来,点开你的F12调试模式。你会发现ueditor的请求路径有问题,所以我又写了一个方法,返回流数据给前段,让其正常显示。

到此,整个一套就完成了。效果我就不展示了。项目已经部署上线,功能也没问题的。如果还有疑问,或者需要帮助的地方,滴滴我就行,肯定会回。😊
☀️☀️☀️