使用百度ueditor实现图片上传和视频上传(自定义路径)

前一阵子开发了一个信息发布的系统,其中发布模块就涉及到了发布信息的编辑,尤其是其中的图片上传和视频上传功能。查阅了很多资料,有需要改jar包的,有需要各种配置的,一路看下来,不是很方便和很清晰。所有写了这篇,一方面是自己记录下,二是给有需要的人参考一下。

进入主题,首先我们去到ueditor的官网,下载最新版的。(自己用的是jsp的utf-8版)

ueditor下载


使用百度ueditor实现图片上传和视频上传(自定义路径)_第1张图片
下载的文件

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

使用百度ueditor实现图片上传和视频上传(自定义路径)_第2张图片
ueditor路径

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


ueditor.css
最后的zh-cn.js可以不用引入


使用百度ueditor实现图片上传和视频上传(自定义路径)_第3张图片
官网的示例是script标签,我这换成了textarea标签

注:其实,ueditior有自己的一套上传方式,就是上传到tomcat的编译文件目录下,这种方式在项目重新部署或者tomcat启停的时候,会将上传的文件丢失。手动拷贝出来,再放进去,这种方式肯定是非常不合适的。(这种方式只要改下配置文件 就行了,很简单)

    既然标题为上传到指定文件目录,那么我们这篇肯定是可以指定文件存放的目录的。所以就涉及到自己写一套后台的上传方法和返回方法。

3⃣️js中,我们需要先实例化编辑器,在通过ueditor提供的方法,请求后台。

使用百度ueditor实现图片上传和视频上传(自定义路径)_第4张图片
action的值是{}config.json对应的imageActionName值

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

使用百度ueditor实现图片上传和视频上传(自定义路径)_第5张图片
上传方法ConstantUtil.FILEPATH(是指定的存储路径)

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

使用百度ueditor实现图片上传和视频上传(自定义路径)_第6张图片
需要返回的类型

到这,其实就可以通过ueditor开始上传图片和视频了。(测试ok的)

但是你会发现不能显示出来,上传成功却没有显示出来,点开你的F12调试模式。你会发现ueditor的请求路径有问题,所以我又写了一个方法,返回流数据给前段,让其正常显示。

使用百度ueditor实现图片上传和视频上传(自定义路径)_第7张图片
仅供参考

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

☀️☀️☀️

你可能感兴趣的:(使用百度ueditor实现图片上传和视频上传(自定义路径))