百度UEditor上传图片-再再总结一次

摘要:
本周,一名CSDN网友遇到了百度UEditor上传的问题,最终同意支付50元。我帮他解决了这个问题。百度UEditor的比较陷阱是,它根据URL获取配置文件,然后也根据该URL获取图像存储位置。百度UEditor的JS和JSP请求是两组不同的响应规则。Spring的上传与百度UEditor的上传冲突,导致文件无法找到。UEditor后端将图像保存到目标位置后,会向前端返回一个url。参考材料:http://blog.snsgou.com/post-593.htmlhttp://blog.csdn.net/sasoritattoo/article/details/22790297 ; 2.10单个图像成功上传后,无法上传多个图像。
本周,CSDN有个网友遇到了百度UEditor上传问题,最后商定付50元钱,我帮他解决这个问题。
    他最初想自己搞定这个问题,结果搞了好多次,好几天,还是没能解决。
    2015年1月17日8:25~2015年1月18日00:24,4个小时终于搞定了这个问题。

 1.总的感悟
    本来预计1个小时,就能解决的,结果硬是花费了4个小时,挺无奈的。 虽说是帮客户解决一个问题,但实际上一个问题相关的问题,非常多。另外,就是解决这个问题,不是普通的咨询,已经参与到写代码、单步跟踪、QQ语音、QQ远程协助了。
    最让人郁闷的是,远程协助,非常卡,太难受了。一个操作,要等好几秒,客户的网络不给力,难道是QQ的服务不行么。

 2.解决百度UEditor图片上传的诸多问题和周边问题

  2.1 config.json找不到。
   找不到,就是UEditor根据url,在某个目录下,没有找到config.json文件。
   解决这个问题,需要下载UEditor的java源码,看看怎么获得config文件的。

   百度UEditor比较坑的地方是,根据URL获得config文件,然后图片存储的位置竟然也是根据这个url来获得的。也就是说,配置文件中的url有2个作用,不是单一的。

  2.2概念混淆。
  这个客户还没有毕业,刚刚实习,感觉经验很欠缺。
  百度UEditor的JS和JSP请求,它们是2套不同的响应规则。一个是静态资源,另外一个是动态请求。

  2.3config.json可以放到webapp项目的外面,比如C://。
  这个时候,需要手动修改rootPath。

 2.4UEditor的config.js中的获得config.json的url,可以是个JSP,也可以是.action等动态请求。
   官网的默认例子是,JSP的,它假定了模版用的是JSP,而不是Freemarker。
   而实际项目中,可能用的是Freemarker,这个时候,也需要配置JSP的视图解析器。

2.5通过写Controller, 用动态请求获得config.json这个文件,最终图片上传失败。
  提示stream为null。
  这个问题,之前总结过了,我们在项目中配置了Sprring上传大小。
  spring的上传和百度UEditor的上传,起了冲突,导致文件找不到。

2.6放弃动态请求响应,而使用JSP方式响应。
  提示找不到controller.jsp,路径明明是正确的。
  最后,和自己的本地进行对比,排除了很多情况,才找到原因。
  
springMVC的url-pattern /和/*的区别
网上有这样的回答

< url-pattern > / </ url-pattern >   不会匹配到*.jsp,不会进入spring的DispatcherServlet类
 < url-pattern > /* </ url-pattern > 会 匹配*.jsp,导致进入spring的DispatcherServlet 类,然后去寻找controller,接着找不到对应的controller所以报错

这让我很有疑问,如果/不会匹配到*.jsp,那么是不是*.jpg之类的静态文件也不会匹配到(不进入DispatcherServlet),但是事实上要访问静态文件还要加<mvc:resources location="/img/" mapping="/img/**"/>来避开匹配
参考:http://zhidao.baidu.com/link?url=jI3AOESn67AVpalSb7kG0ZUJ37hjeSPyW024VL4mK2YoGtv2IBFU7VUemQM85PLnv0dhVdcL82roCBAC0ggAwb5_izsc91w4MkuScIvK3hu

客户配的是/*,SpringMVC拦截了JSP请求,但作为Action响应,找不到就404了,最后改成/。

2.7图片上传成功了,但是无法回显。
 UEditor后端保存图片到目标位置之后,返回前端一个url。前端根据url,去取图片,取不到。
图片保存在项目的外面,比如C:/img,前端请求不可能直接访问到,需要做映射。

2.8做了映射,图片仍然找不到。
后端回显的url,不带工程名,比如是/imgs/a.jpg。
但是前端正常访问需要带项目名称,比如ssh。
一种解决办法是,在后端获得url之后,或者前端获得url时,手动加上项目名称,使得图片的url有项目名称,比如
http://a.com/ssh/img/a.jpg

另外一种办法,是为了方便,直接把Tomcat部署到根目录下,访问路径不带项目名称,这样就避免了上述问题。

2.9Eclipse中部署Tomcat到根目录,需要手动修改Context Path。
正解: 
右键单击项目名称 --> Properties --> Web Project Settings --> 把 “Context root” 改成 “/
非正解:右键点击项目名--Properties--Tomcat--General,将Context name框中值修改为:/  
不同网友给出的答案不一样,可能会版本 之类的因素有关系。
参考资料: 
http://blog.snsgou.com/post-593.html
http://blog.csdn.net/sasoritattoo/article/details/22790297 ;

2.10单个图片上传成功之后,多个图片无法上传。
  根据浏览器控制台,发现是CSS找不到。 
  这个问题,最终没有亲自去解决,告诉了客户原因,让他自己去分析并解决。
  因为最麻烦的单个图片上传的整个逻辑、全部流程debug、所有问题都解决了。

3.其它一些感受
  挣点外快很难啊,一方面是一般人不愿意付费,另一方面别人愿意付费的时候,多是比较棘手的问题。100元钱,觉得太多。
  说实话,如果只是从挣钱的角度,绝对是划不来的。因为很多客户的问题,都是相对麻烦的,而且你没有上下文环境,通过远程debug,解决问题的效率比较低,远远没有本地调试方便。另外,找你帮忙解决问题的客户,多是水平和经验不如你的人,交流起来比较困难,经验完全不对等,你说的话,客户理解比较慢。

  之所以,坚持做这种事,是因为可以获得金钱之外的好处,比如提升自己解决问题的能力,接触更多的人,也可以提高自己的影响力。说不定,还有机会结识几个好友。 

免责声明:文章转载自《百度UEditor上传图片-再再总结一次》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇docker常规操作——启动、停止、重启容器实例MMC卡的文件系统及其实现方法下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

Linux下svn常用命令

1、将文件checkout到本地目录 svn checkout path(path是服务器上的目录)   例如:svn checkout svn://192.168.1.1/pro/domain    简写:svn co 2、往版本库中添加新的文件   svn add file   例如:svn add test.php(添加test.php)   s...

python爬取免费西祠代理

#!/usr/local/bin/python3.7 """ @File : xicidaili.py @Time : 2020/06/02 @Author : Mozili """ import urllib.request import urllib.parse from lxml import etree import...

thinkphp 5 整理笔记

初始化操作initialize 1 //会优先执行该函数 2 public functioninitialize() 3 { 4 echo 'initialize'; 5 } 前置操作 1 protected $beforeActionList =[ 2 //只执行test的时候会执行test1函数 3 //'tes...

angular 依赖注入

依赖注入    依赖注入(DI)是一个经典的设计模式, 主要是用来处理组件如何获得依赖的问题。关于DI,推荐阅读Martin Flower的文章(http://martinfowler.com/articles/injection.html )。    Angular负责创建组件,解决它们之间的依赖关系,并按要求提供其他组件。 使用依赖注入   依赖注入在...

(转)react 项目构建

原文:https://segmentfault.com/a/1190000016342792 写在前面 每次构建react项目的时候都会配置一大堆东西,时间久了就会忘记怎么配置。为了方便自己记忆也为了其他开发者在构建react应用时能够快速开发,故作此记录。 本项目基于 create-react-app 脚手架进行配置。主要配置了一些项目开发中常用的方法,...

web.config配置详细说明

(一).Web.Config是以XML文件规范存储,配置文件分为以下格式 1.配置节处理程序声明特点: 位于配置文件的顶部,包含在<configSections>标志中。2.特定应用程序配置特点: 位于<appSetting>中。 可以定义应用程序的全局常量设置等信息.3.配置节设置特点: 位于<system.Web>节...