Ueditor，ASP中图片上传和图片回显路径的设置

在csdn六百多天的游侠今日现身江湖。

问题发生的背景：
所有项目代码中，图片上传都是固定存到一个图片专属的盘符，这样就可以整个盘符对所有图片进行备份以防丢失。
但是！有一个站点所引用的百度编辑器（主要用来发送通知）则不然，每次上传通知，内容中的图片、文件都传到了项目路径下，当我项目重新发布一个版本后，上传生成的图片文件夹就没了…
幸好每次更换项目代码都会把之前的那个备份一下，然后又得手动把之前的图片文件夹复制粘贴到新版本的项目代码中。但总是会忘记的…好几次同事打开通知都显示不出历史图片后，决心修改Ueditor的上传和回显路径，改到专门保存图片的盘符下。

1、我的环境

先说一下我的S操作所在的本地环境吧

• Window10
• IIS 10.0
• Visual Studio 2015
• SQL Server 2014 Management Studio

2、修改需求

在查找解决方案前，我脑海中都会先大致给预设一个修改需求，带着修改要求去找解决方案，然后在过程中尽量往预设的修改需求靠拢，实在靠拢不了也能合理地改变嘛。

因为在正式环境中代码和图片是放在两个不同盘符的，我本地就按照它上面来。
主要就是要实现，图片上传路径从项目包所在路径换成图片保存的另一个盘符。

- 代码包放在D盘
这个是引入的Ueditor包的路径，menu是我的项目包名称

- 图片路径设置在F盘
image就是我编辑器要上传的图片保存文件夹

- IIS设置个虚拟路径
在站点下设置虚拟路径，路径指向保存图片的专属盘符F盘。（应该没有不会设虚拟路径的小可爱吧？）
其实路径也可以在Ueditor的路径配置文件中，写死成某一个盘符的路径，以后修改盘符的时候修改配置文件就行了。（如下SSR君的博客所分享）
但我比较倾向于使用站点下的虚拟目录，修改虚拟目录指向的物理路径就行了，也方便以后其他图片要上传到图片保存专属盘符，直接使用虚拟目录img上传就行。
其实都差不多，自己权衡考虑吧~

3、啃文档

当然，在啃文档之前还是先把项目中的Ueditor引用的代码扫了几眼的，发现…LZ看不懂啊，果断乖乖先去搜文档啃几口填填肚子。

①源文件

（Ueditor的源文件一定要看，很详细地写了PHP、ASP、JSP要怎么配置试用，怎么二次开发，还有一些常见的问题等。）

限定君： 百度编辑器官方文档

②他人博客

（搜索关键词Ueditor上传路径配置、Ueditor自定义上传地址等等啦，相信各位已经得心应手的）

• SSR君：https://www.geek-share.com/detail/2668941444.html
• SR君： https://www.geek-share.com/detail/2682245660.html
• R君：https://www.geek-share.com/detail/2731992313.html
  （玩阴阳师的都懂的，限定就是稀有；SSR君就是对我解决问题帮助最大的；SR君其次，我下载他的demo下来后无法解压，显示解文件损坏；R君帮助不是很大，但可以稍微参考一下，因为他里边是java的栗子…）

4、试错进行时

在啃了一两天文档后，对编辑器的配置和调用了解了个大概，接下来就是动手时刻。

①Ueditor，net目录内的源码结构

②尝试修改UEditor 后端的配置文件config.json

就是这两个配置项，不管我怎么改【imagePathFormat】，上传的图片都是在项目路径下面蹦跶，要么就是前端的编辑界面崩了。
按照别人的步骤修改也是一样…

- 图4-1：图片无法显示，上传还是在项目内
（写入数据库的回显地址没有该图片，上面已经说了，我站点的虚拟目录img指向的是F盘，而图片上传都在D盘的项目目录下，当然无法回显！）

- 图4-2：直接连单图上传按钮都灰掉了…
（对【imagePathFormat】写了一些无法辨认的路径）

- 图4-3：文件访问出错
（路径传给UploadHandler时，在磁盘上找不到所给路径【localPath】）

- 图4-4：数据库传回来的回显路径
这只是一小部分测试历史，其他的一些最新的不可看内容就不方便放出来了，能用的路径都尝试了一遍（笨鸟先飞~）
其实就是config配置文件中【imageUrlPrefix】与【imagePathFormat】的拼接。

诸如此类的问题层出不穷…(扶额扶得发际线越加危险）

③由此可得

不过还是有所收获的，也就是说：

- 【imagePathFormat】是图片的上传路径
在config配置文件内改什么都是没用的，都只会上传到项目路径下

- 入库的图片/路径图片回显地址其实是
【imageUrlPrefix】+【imagePathFormat】的拼接（其实回显完全可以不写，反正写入的回显地址为上传地址也没影响，都是在项目内…在项目外的话肯定是要写的，不然回显不了，如上错误图4-1）

- 只能在另外的方法中动刀了，下一节UploadHandler

测试无果后中场休息一天，先做做别的事说不准就有灵感了。

5、UploadHandler文件的修改

（见证奇迹的时刻！暴露年龄的话梗…）
要修改路径，最重要的方法是UploadHandler！UploadHandler！UploadHandler！说三遍！
在借鉴无果的情况下，还是自己打断点调式一下吧！

①调试前

先来理一下UploadHandler和config的关系

②调试中

结果让我一目了然：【savePath】、【localPath】、【Result.Url】这三个地址的数据返回让我豁然开朗！茅塞顿开！

- 图5-1：【savePath】的返回地址
地址为【imagePathFormat】传过来的，目前一切还很正常

- 图5-2：【localPath】返回的地址请看！
居然多了前面一串项目的路径（还记得前面吧？我把项目放在了D盘）！难怪啊！！！我在config.json怎么改都没用啊，你在UploadHandler中给添加了前缀！
为什么如此呢？可去了解一下Server.MapPath这方法的使用：返回与WEB服务器上的指定虚拟路径相对应的物理文件路径

- 图5-3：最后看一下地址【Result.Url】
【Result.Url】的地址=【savePath】获取的地址=【imagePathFormat】设置的地址

③调试后

是不是豁然开朗！！！由此可见

- 【localPath】为编辑器的图片上传地址！
（来来来！给它们做做文章）

6、最后的修改，成果展现

- 图6-1：修改图片红框两个地方
var localPath = Server.MapPath("/img")+ savePath、“imageUrlPrefix”:“http://localhost:9011/img”,
（就修改这么两个个地方！！膝盖微微发软…）
如果觉得在方法里面修改，后面路径名要变的话，还要重新发布项目很麻烦，可以参照上面SSR君的博客，在config.json中定义一个参数保存路径名。
不过其实都差不多，设置了一个img虚拟目录后，img可以不变的，其他目录地址是可以随便变化的。（不过，存放图片的路径还是不要轻易大动，牵涉的项目中上传路径太多了。）

- 图6-2：编辑界面
哈哈哈哈哈哈！！上传成功且成功回显！

- 图6-3：保存图片的F盘中
有图片！！成功传到了D盘外的非项目所在盘符。

- 图6-4：最后查看一下数据库传入的回显HTML中的src
站点：端口/虚拟目录/虚拟目录指向的物理路径（即【imagePathFormat】）
要问怎么把html传到数据库的，此内容不在今日所说范围。

至此上传和回显的的路径修改已完成！还剩下一些数据库中历史回显路径的批量修改，今晚先加鸡腿，nice~

我只负责维护，如果大刀阔斧，那就离重构不远了…大门在那边，慢走不送~
溜了溜了~

• 点赞
• 收藏
• 分享
• 文章举报