【.net】Ueditor中图片上传和图片回显路径的设置
在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.cnblogs.com/mazhiyuan/p/5275964.html
- SR君: https://www.cnblogs.com/flower1990/p/5773068.html
- R君:https://blog.csdn.net/u011546347/article/details/79550226
(玩阴阳师的都懂的,限定就是稀有;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~
我只负责维护,如果大刀阔斧,那就离重构不远了…大门在那边,慢走不送~
溜了溜了~
【.net】Ueditor中图片上传和图片回显路径的设置相关推荐
- SpringBoot vue图片上传不能立即回显问题解决
最开始项目是放在eclipse之中的.springboot项目默认把静态的文件加载到classpath的目录下的.而此时我们上传的图片并没有传入启动了的项目当中去.所以明明路径是对的.却访问不了.在项 ...
- 32 Java中多媒体文件上传及页面回显
文件上传页面 <%@ page language="java" contentType="text/html; charset=UTF-8"pageEnc ...
- java 图片服务器 上传_Java实现把图片上传到图片服务器(nginx+vsftp)
前言: 在我另一篇笔记中已经记载了如何用nginx + vsftp搭建图片服务器(请参考nginx + vsftp搭建图片服务器),并且用vsftp的客户端工具filezilla测试过已经可用.但是在 ...
- 菜鸟的springboot项目图片上传及图片路径分析
菜鸟的springboot项目图片上传及图片路径分析 说明 一.图片路径分析 二.实现图片上传 (1)单文件上传(非异步) (2)单文件上传(异步) 三.总结 四.更新配置文件 说明 更新时间:202 ...
- 通过url链接将图片上传oss图片显示不完整问题
通过url链接将图片上传oss图片显示不完整问题 问题:在之前通过链接上传图片的时候,都是先获取inputStream流,然后通过available()方法获取文件大小.但是通过这种方法获取到的文件大 ...
- vue+vant图片上传压缩图片大小
vue+vant图片上传压缩图片大小 可能在项目中大家都会遇到文件上传的需求,比如头像,图片等,但是太大的文件上传会给服务器造成很大大压力,那么我们就需要压缩上传的文件 其实这儿所说的压缩,就是图片重 ...
- java分布式实现图片上传到图片服务器
java分布式实现图片上传到图片服务器 操作步骤 第一步 第二步 第三步 第四步 第五步 第六步 代码实现 第七步 JS代码 大功告成!! 操作步骤 第一步 在页面中的form表单里面增加一个inpu ...
- python修改图片大小为30kb_Python的Tornado框架实现图片上传及图片大小修改
图片的上传 上传图片使用了表单提交, 下面是html部分, enctype="multipart/form-data"表示不对字节进行编码,上传文件类型时需指定. input标签的 ...
- springboot实现图片上传和图片删除
图片上传主要将需要上传的图片上传到对应的存储地址当中,再通过url访问图片就可以了:本文存储地址在本地,如果是在服务器上,配置服务器端的地址就可以了. controller @ApiOperation ...
- php 怎么上传图片,php怎么把图片上传到图片服务器
php怎么把图片上传到图片服务器? 图片服务器代码<?php /** * 图片服务器上传API接口 * by Zx * date 2016-04-28 */ header('Content-ty ...
最新文章
- 马斯克脑机接口遭质疑:不是新技术,没体现神经解码进展
- 一道算法题,求更好的解法
- YOLOv5导出jit,onnx,engine
- 第十三期:消灭 Java 代码的“坏味道”
- C#中ToString格式大全
- PHP函数库06:PHP统计字符串里单词出现次数
- PYQT4 Python GUI 编写与 打包.exe程序
- 解读 | 滴滴主题研究计划:机器学习专题+
- 尘埃落定!熊猫互娱近20亿元投资纠纷已解决
- 95-30-009-Channel-总述
- 在巴展上做成90%的生意 爱立信MWC关键字:5G、IoT、云
- JBOSS常用端口说明
- 4g网络什么时候淘汰_你的4G手机 什么时候淘汰
- 使用VScode插件vs-picgo传图到阿里云(Ubuntu18)
- 计算机使用快捷键大全
- 基于双碳背景和趋势讲述AcrelEMS企业微电网能效管理系统-Susie 周
- Driver/library version mismatch
- 使用OpenCV实现Halcon算法(4)OpenCV实现边缘模板匹配算法
- 首届Starcoin Move黑客松源码分析——Atlaspad
- 关于hive统计周wau、保留率需求的几种思路