java(ssm项目) - jsp 使用UEditor(百度富文本)保存图片上传FTP服务器并回显

本文部分参考一下项目:https://blog.csdn.net/yuancenyi/article/details/53327414,感谢作者!


1、项目需求:

        使用百度富文本编辑器实现“重要节假日高速出行指南内容”编辑,功能涉及图片、视频上传。

2、存在问题

        百度富文本编辑器默认将图片、视频上传至项目里,如果使用Tomcat作为服务器的时候,如果不配置图片保存路径,将图片保存在项目路径下,那么再次打war包发布项目可能会造成图片的丢失,每次重启前将图片先保存再copy到服务器明显不方便,这时可以配置图片保存位置,将图片保存到项目外的地方。

3、解决方法:

        (1)将图片、视频等上传至非工程目录下,好处是:不用担心项目重启,图片会清空的问题,不好的地方是,需要tomcat配置虚拟路径,可参考:https://blog.csdn.net/qian5211991/article/details/80764635

        (2)将图片、视频等上传至FTP服务区

            解决步骤:

                    1、正常引入相关js


                    2、实例化编辑器并自定义图片保存路径(可参考:http://fex.baidu.com/ueditor/#qa-customurl)


    其中,标红的是重写上传的后台方法,后面会有说明。

3、上传图片配置项

    修改config.json文件中,图片、视频上传相关内容,如下:


注意标红处内容。

        4、后台保存上传图片、视频,如下:

        与2步骤中,图片请求地址相同。


    注意箭头指示地方,这是图片能回显的关键,因为图片回显的src使用的就是URL配置的地址!

    至此图片上传进FTP服务器(FTP相关工具包,如需要,请留言,谢谢)

5、修改ueditor中的js文件ueditor.all.js中代码,是图片回显。


    在3步骤中,配置图片访问路径前缀为空,则页面回显图片的时候,图片src显示为:


    图片默认请求后台的captchaImage方法,如下:


           至此,图片回显完成!


            6、清理ueditor中上传的无用的图片

                    请参考:https://blog.csdn.net/qian5211991/article/details/80764852

            另:FTP上传需要配置的地方

            1、属性文件配置

                

            2、spring配置文件

        



  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值