成为VIP
连接后台服务
后台接口
到目前为止，前端ueditor静态资源已配置完毕vue上传图片，接下来配置后台文件上传接口。
打开ueditor.config.js文件，找到如图所示的serverUrl字段。这里我配置的是
serverUrl: window.location.origin + ‘/api/ueditor/jsp/controller.jsp’
这里需要说明一下，前后端分离在前端需要在根目录config文件夹下的index文件配置后台服务代理地址以映射后台服务，我是将前端的/api目录映射后台服务的根目录。如图所示，在dev项配置proxyTable，使用/api目录映射后台服务接口
因此在配置serverUrl的时候window.location.origin + ‘/api’即找到后台接口，’ueditor/jsp/controller.jsp’映射ueditor服务路径
（由于是从前端视角分析ueditor配置，这里不会详细说明java中contoller是怎么实现的，其它诸如php，net，asp大同小异）
地址前缀
到目前为止，整个前端配置工作已全部完成，打开组件试着上传一张图片vue上传图片，观察network，是能够获取后台响应的，但是有个问题，图片上传成功后并没有在编辑框中反显，仅仅显示出图片的名字，对！还有一个配置项
打开后台部分的jsp/config.json文件，找到imageUrlPrefix字段，这个是图片访问路径前缀。
由于后台返回的图片地址是一个相对地址，如果不配置的话会从前端当前目录下开始计算图片的绝对路径，可以想象，图片上传成功后返回的是该图片在后台的相对地址，再配合前端页面的地址得到的绝对路径必然是有问题的
解决方案是，配置imageUrlPrefix字段。假设后台的地址是localhost:8080
“imageUrlPrefix”: “http://localhost:8080/root”, /* 图片访问路径前缀 */
后台根路径是root，这样配置后前端在上传图片反显的时候会用这个前缀加上图片相对地址来获取图片的绝对地址，实现图片的显示
当然，你也可以将这个地址配置为前端路径，使用前面提及的代理模式去访问图片地址。假设前端地址是localhost:8081
“imageUrlPrefix”: “http://localhost:8081/api”, /* 图片访问路径前缀 */
这里需要强调的是，在配置时一定记得加上协议头”” 或 “”, 不然连上传图片的时候连前端请求都找不到！ 亲测~~~
发一张配置成功上传图片并反显的效果图
致敬偶像登哥！（图片侵删）
技术处女贴，欢迎批评指正多多交流！
限时特惠：本站每日持续更新海量设计资源，一年会员只需29.9元，全站资源免费下载
站长微信：ziyuanshu688
htebazile
