ueditor asp.net版本更改图片保存路径
来源：博客园
目的：把本地上传的图片放置到跟目录下的Images/Upload文件夹下。 修改步骤： 1、ueditor.config.js文件中的， imagePath: URL + "net/" 修改为： imagePath: "/" 2、net文件夹下的Config.cs文件中， public static string[] ImageSavePath = new string[] { "upload1", "upload2", "upload3" }; 修改为： public static string[] ImageSavePath = new string[] { "Images"}; 3、net文件夹下的Uploader.cs文件中的upFile方法， uploadpath = cxt.Server.MapPath(pathbase); 修改为： uploadpath = cxt.Server.MapPath("~/" + pathbase); 4、 info = up.upFile(context, path + '/', filetype, size); 修改为： info = up.upFile(context, path + '/' + "Upload", filetype, size); 配置起来有点麻烦，不知道有没有更简单的方法，也不知道对其他东西的上传有没有影响。还请过路的朋友共同分享经验。
免责声明：本站部分内容、图片、文字、视频等来自于互联网，仅供大家学习与交流。相关内容如涉嫌侵犯您的知识产权或其他合法权益，请向本站发送有效通知，我们会及时处理。反馈邮箱&&&&。
学生服务号
在线咨询，奖学金返现，名师点评，等你来互动记录springmvc+ueditor1.4.3上传附件问题 - 刃于心而未达，拔之即死，则以惨痛苟存，是以为忍也 - ITeye技术网站
博客分类：
百度富文本编辑器地址：/website/index.html
1.UEditor上传目录
2.在ueditor.config.js中配置serverUrl: "/resources/plugin/ueditor"
3.后台配置访问路径
@RequestMapping("resources/plugin/ueditor")
public void baiduEdit(HttpServletRequest request, HttpServletResponse response) {
request.setCharacterEncoding("utf-8");
response.setHeader("Content-Type", "text/html");
String rootPath = request.getServletContext().getRealPath("/");
logger.debug("================&{}", rootPath);
//针对配置百度上传附件读取配置文件
ActionMap.mapping.put("config", ActionMap.CONFIG);
//上传文件
ActionMap.mapping.put("uploadfile", ActionMap.UPLOAD_FILE);
ActionEnter actionEnter = new ActionEnter(request, rootPath);
response.getWriter().write(actionEnter.exec());
} catch (Exception e) {
e.printStackTrace();
配置成功后，可以启动项目, 执行url
http://localhost:8080/longchoudai/resources/plugin/ueditor?action=config
可以看到你配在config.json中的Json数据
4.上传附件时候修改原百度BinaryUploader.java 在目录com.baidu.ueditor.upload下面
public class BinaryUploader {
private static Logger logger = LogManager.getLogger();
* 保存文件
* @author lance
* 日 下午2:26:49
public static final State save(HttpServletRequest request, Map&String, Object& conf) {
boolean isAjaxUpload = request.getHeader("X_Requested_With") !=
if (!ServletFileUpload.isMultipartContent(request)) {
return new BaseState(false, 5);
ServletFileUpload upload = new ServletFileUpload(
new DiskFileItemFactory());
if (isAjaxUpload) {
upload.setHeaderEncoding("UTF-8");
String savePath = request.getServletContext().getRealPath("/")+"/attached/file/"+JodaTimeUtils.dateToString(new Date(), null)+"/";
String saveUrl
= request.getContextPath() + "/attached/file/";
//上传附件目录
Path path = Paths.get(savePath);
if(!Files.isDirectory(path)){
Files.createDirectories(path);
} catch (IOException e) {
logger.error("百度上传附件创建上传文件夹错误： {}", e.getMessage());
//重新命名文件名字
String newFileName = "", fileExt = "", fileName = "";
CommonsMultipartResolver multipartResolver=new CommonsMultipartResolver(request.getSession().getServletContext());
//检查form中是否有enctype="multipart/form-data"
if(multipartResolver.isMultipart(request)) {
//将request变成多部分request
MultipartHttpServletRequest multiRequest=(MultipartHttpServletRequest)
//获取multiRequest 中所有的文件名
Iterator&String&it=multiRequest.getFileNames();
//遍历文件
while(it.hasNext()) {
MultipartFile file=multiRequest.getFile(it.next().toString());
if(file != null){
SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");
fileName = file.getOriginalFilename();
fileExt = fileName.substring(fileName.lastIndexOf(".")).toLowerCase();
//新文件名称
newFileName = savePath + df.format(new Date()) + "_" + new Random().nextInt(1000) + fileE
saveUrl = saveUrl + df.format(new Date()) + "_" + new Random().nextInt(1000) + fileE
if (!validType(fileExt, (String[])conf.get("allowFiles"))) {
return new BaseState(false, 8);
//上传文件
file.transferTo(new File(newFileName));
} catch (IllegalStateException | IOException e) {
logger.error("百度上传附件保存文件错误： {}", e.getMessage());
State storageState = new BaseState(Boolean.TRUE);
if (storageState.isSuccess()) {
storageState.putInfo("url", PathFormat.format(saveUrl));
storageState.putInfo("type", fileExt);
storageState.putInfo("original", fileName);
return storageS
} catch (Exception e) {
logger.error("百度上传附件文件错误： {}", e.getMessage());
return new BaseState(false, 4);
private static boolean validType(String type, String[] allowTypes) {
List&String& list = Arrays.asList(allowTypes);
return list.contains(type);
浏览: 216026 次
来自: 上海
项目跑步起来啊，打印完日志就 Process finished ...
什么都不懂的孩子 写道请问一下registry.addInte ...
1 、2 楼 那句的意思是加入名称为UserSecurityI ...
保存密码的同时，也保存盐值，下次验证时用保存的盐值来生成的密码 ...在.net&mvc&4使用UEditor，调试图片上传问题
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。C# .net Ueditor实现图片上传到阿里云OSS 对象存储
C# .net Ueditor实现图片上传到阿里云OSS 对象存储
在学习的时候，项目中需要实现在Ueditor编辑器中将图片上传到云储存中，老师演示的是上传到又拍云存储，既然看了一遍，直接照搬不算本事，咱们可以依葫芦画瓢自己来动手玩玩其它的云存储服务。
现在云计算产品服务已经很普遍，市场产品也有很多选择，感兴趣的同学可以去搜索下云存储，这里我选择了阿里云的对象存储服务，他们叫做阿里云&OSS（Object Storage Service），实现之前我简单的说下几个概念，加深自己的理解
1.1、什么是云存储
云存储是在云计算(cloud
computing)概念上延伸和发展出来的一个新的概念，是一种新兴的网络存储技术，是指通过集群应用、网络技术或分布式文件系统等功能，将网络中大量各种不同类型的存储设备通过应用软件集合起来协同工作，共同对外提供数据存储和业务访问功能的一个系统。当云计算系统运算和处理的核心是大量数据的存储和管理时，云计算系统中就需要配置大量的存储设备，那么云计算系统就转变成为一个云存储系统，所以云存储是一个以数据存储和管理为核心的云计算系统。简单来说，云存储就是将储存资源放到云上供人存取的一种新兴方案。使用者可以在任何时间、任何地方，透过任何可连网的装置连接到云上方便地存取数据。——资料来自百度百科（）
简单的来说，现在大型网站开发大都采用这样的架构方式(分布式文件系统)，图片、文件、资料上传到云存储，提供云存储服务的公司有专业的团队来帮你维护你的资源、安全可靠、价格较低。
1.2、对象存储有那些具体的优点
一张图让你快速了解对象存储——图片截取自阿里云OSS首页
1.3、为什么大型网站选择将图片等放入单独的域名(云存储的使用)
1.3.1、降低主站服务器的压力，分流。
1.3.2、可以降低cookie的流量占用。
1.3.3、CDN（将源站内容分发至全国所有的节点，缩短用户查看对象的延迟，提高用户访问网站的响应速度与网站的可用性，解决网络带宽小、用户访问量大、网点分布不均等问题）。
1.3.4、安全性高（各个服务公司都有对数据进行备份和安全机制处理）
1.3.4、云存储价格较低，随用随升，按量定制。
可以看出好处还是很多的，话不多说，进入正题，
1.4、开通服务在使用之前，我们先弄清楚 OSS 的几个基本概念。
1.4.1、我们上传的所有数据文件在OOS上以对象（object）的形式上传到存储空间（bucket）中。 所以我们至少创建一个存储空间，然后向每个存储空间中添加一个或多个文件。
1.4.2、已上传文件（以bucket+endpoint为地址）进行文件的分享和下载。通过修改存储空间或文件的属性或元信息，还可以设置相应的访问权限。
1.4.3、阿里云OSS在管理控制台管理和执行基本和高级 OSS 任务，您还可以通过阿里云开发工具包或通过直接在应用程序中进行 REST API 调用执行基本和高级 OSS 任务。(这里我在项目中使用API调用服务)
接下来我们下载&&的.NET SDK
安装的方式有很多种
NuGet安装、GitHub安装、DLL引用方式安装、项目引入方式安装
因为还从来没有尝试过NuGet，所以好奇心下我决定采用这种姿势来安装(后来我发现它是个好东西啊，我决定以后多宠幸它)
简单的说说NuGet：
NuGet 是一个Visual Studio的扩展。在使用Visual
Studio开发基于.NET Framework的应用时，NuGet能够令你在项目中添加、移除和更新引用的工作变得更加快捷方便。（我们在安装Vs的时候一般都会附加，如果没有就需要额外安装）
这就是说: 我们往往在开发项目里，会使用一些第三方的dll, 如：Newtonsoft.Json.dll (它为我们提供了进行序列化和反序列化解决方案）
但是，我们往往也面临随着项目升级，对这些引入的第三方插件进行升级的可能和必要。
现在，NuGet 将这个过程系统化（代替你去寻找它的最新版本，下载，解压，然后替换等操作），令你可以更加方便的查找你要的第三方的dll， 同时，还可以为你提供自动或者手动更新的方式来升级你的插件。整个过程帮我们省事不少~
安装过程：
解决方案中右击
再下图搜索框输入需要安装的SDK包(输入阿里云或aliyun.oss.sdk)、点击安装即可，只要选择安装到指定的项目中即可。一键导入很方便有木有
——————————————————————————————————————————————
———————————————————简单粗暴的分隔线———————————————————
——————————————————————————————————————————————
一、下面开始改造Ueditor上传图片的服务(安装配置过程参照)
Ueditor（App_Code目录）: 上的文件是应用程序的源码。成功发现UploadHandler.cs类，基于此类我们就可以完成上传的功能。
观察UploadHandler中Process()方法里面的这段代码是实现将图片上传保存到网站目录下
先将代码注释掉
然后自己写上传到阿里云的代码
//上传到阿里云
using (Stream fileStream = new MemoryStream(uploadFileBytes))//转成Stream流
var fs = Request.Files[UploadConfig.UploadFieldName];
string md5 = puteContentMd5(fileStream, fs.ContentLength);
string today = DateTime.Now.ToString(&yyyyMMdd&);
string FileName = uploadFileName + today + Path.GetExtension(uploadFileName);//文件名=文件名+当前上传时间
string FilePath = &Upload/& + today + &/& + FileN//云文件保存路径
//初始化阿里云配置--外网Endpoint、访问ID、访问password
OssClient aliyun = new OssClient(&https://oss-cn-【外网Endpoint区域】.&, &your Access Key ID&, &your Access Key Secret&);
//将文件md5值赋值给meat头信息，服务器验证文件MD5
var objectMeta = new ObjectMetadata
ContentMd5 = md5,
//文件上传--空间名、文件保存路径、文件流、meta头信息(文件md5) //返回meta头信息(文件md5)
aliyun.PutObject(&bucketName&, FilePath, fileStream, objectMeta);
//返回给UEditor的插入编辑器的图片的src
Result.Url = &http://bucketName.oss-cn-【外网Endpoint区域】./& + FileP
Result.State = UploadState.S
catch (Exception e)
Result.State = UploadState.FileAccessE
Result.ErrorMessage = e.M
WriteResult();
上传功能实现（能上传但还不能在编辑器中预览，还需要改造下Ueditor配置文件，见第二部分~ ~ ）
ps：这里因为PutObject方法第三个参数需要Stream，而Ueditor源码是读取文件的byte[]，小白的看不太懂源码就不太敢改，而是将获取的文件字节转换成了Stream流来上传使用。
另外需要一提的是
OssClient aliyun = new OssClient(&https://oss-cn-【外网Endpoint区域】.&, &your Access Key ID&, &your Access Key Secret&);
1、这里的外网Endpoint区域需要自行替换成你创建bucket里面分配的OSS区域，可在bucket概览中查看
2、Access Key ID和Access Key Secret需要我们去OSS创建（根据ID和Secret分配不同的权限操作OSS）
——————————————————————————————————————————————
———————————————————简单粗暴的分隔线———————————————————
——————————————————————————————————————————————
二、接下来还需要更改Ueditor的上传图片的配置信息
去除Ueditor自动加上的图片访问路径前缀，这样我们才能在上传成功之后预览到图片。
查看Object内容，成功上传到OSS。
——————————————————————————————————————————————
———————————————————简单粗暴的分隔线———————————————————
——————————————————————————————————————————————
总结：在完成功能的路上也有走偏过掉到坑里，但一名好的程序员要懂得不懂就查，在运用的过程中要明白原理，知识不能停在表面的理解上，这样才能举一反三，活学活用，同时我发现，在调用功能包的时候，首先需要多翻看官网提供的API文档和功能介绍，理清它们之前的关系，不然对面各种类库文件眼花缭乱，只会让自己无从下手。
至此，成功完成Ueditor上传图片到阿里云OSS功能。小白还需要进步，欢迎大家指点。
我的热门文章
即使是一小步也想与你分享ueditor的使用(实现上传图片功能)
时间： 23:03:45
&&&& 阅读：126
&&&& 评论：
&&&& 收藏：0
标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&之前使用ckeditor不能实现上传图片功能,只要是我不知道怎么使用啦o(￣&￣*),然后就换了ueditor~~,可以实现上传图片功能啦~\(≧▽≦)/~~
下面是我的步骤:去官网下载最新版ueditor,解压缩后放到文件目录下,如下:
&script src="~/Content/ueditor/ueditor.all.js"&&/script&
&script src="~/Content/ueditor/ueditor.all.min.js"&&/script&
&script src="~/Content/ueditor/ueditor.config.js"&&/script&
&link href="~/Content/ueditor/themes/iframe.css" rel="stylesheet" /&
&script type="text/javascript" &
var editor = new baidu.editor.ui.Editor({
UEDITOR_HOME_URL: ‘/Content/ueditor/‘,//配置编辑器路径
iframeCssUrl: ‘/Content/ueditor/themes/iframe.css‘,//样式路径
initialContent: ‘欢迎使用ueditor‘,//初始化编辑器内容
autoHeightEnabled: true,//高度自动增长
minFrameHeight: 500//最小高度
editor.render(‘Text‘);
&style&&&td&内容：&/td&&td&&&textarea cols="80" id="content" name="Text" rows="10"&&/textarea&&/td&
在文件夹里面新增文件夹upload,image
做好这几步后,就可以实现上传图片功能了。但是我出现了下面这种问题:
调试后是这种错误:
百度无果,然后发现是这个ueditor文件夹没有完全包含在项目里面,然后作如下操作就可以了:
标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&原文：/miaoying/p/4937644.html
教程昨日排行
&&国之画&&&& &&&&&&
&& &&&&&&&&&&&&&&
鲁ICP备号-4
打开技术之扣，分享程序人生！