UEditor 图片视频上传

项目后端使用语言 :java ,ssm框架 maven 工程

(普通的jar包方式自己添加jar就OK了,)

最近项目中使用到富文本功能,参考和比较之下,采用了百度的Ueditor 富文本编辑器.感谢百度.

现在把实现的方式介绍给大家，使用的是最新的UEditor版本1.4.3.1,官网下载地址

http://ueditor.baidu.com/website/download.html

,选择了 jsp 版

1、下载UEditor后，解压，把它放到工程里，还有它的Jar包也要放进去，1.4.3.1结构是这样的

(现在js 中有一处错误,不影响)

//2. 开始从前端配置介绍.

2.新建一个 html页面.引入ueditor的js. 注意引入的顺序.

代码:

<scripttype="text/javascript"src="${ctx}/static/ueditor/ueditor.config.js"></script>

<scripttype="text/javascript"src="${ctx}/static/ueditor/ueditor.all.js"></script>

<scripttype="text/javascript"charset="utf-8"src="${ctx}/static/ueditor/lang/zh-cn/zh-cn.js"></script>

2.2 初始化富文本编辑器容器

<textareaname="editor"id="editor"style="width:76%;height:400px"></textarea>

<scripttype="text/javascript">

varue= UE.getEditor('editor',{

});

UE.Editor.prototype._bkGetActionUrl=UE.Editor.prototype.getActionUrl;

UE.Editor.prototype.getActionUrl=function(action){

if(action =='uploadimage'||action=='uploadscrawl'|| action =='uploadimage') {//图片上传的ctl

return'/knowsource/action';

}else if(action =='uploadvideo'){//执行上传视频的action名称

return'/knowsource/actionForVideo';

}else{

return this._bkGetActionUrl.call(this, action);

}};

</script>

2.3 在初始化富文本的下面写这段代码.(红线内的内容)

var ue = UE.getEditor('editor'); 就是创建面板用的，一定要有；如果不使用自定义上传，那么下面的也就不需要了，只要创建面板那一句就够了。

作用:

UE.Editor.prototype._bkGetActionUrl=UE.Editor.prototype.getActionUrl; 是用来获取Action的，照写就行，然后就是下面的 UE.Editor.prototype.getActionUrl=function(action){....} 这里面的if语句，就是用来设置自定义action的，这里叫Controller.

2.4 修改 ueditor下jsp里面的config.json

你会发现，下面有个imageActionName，这个xxxxActionName，开始以为是需要把自定义上传Controller设置在这边，所以我点击上传的时候就报，错误的Action还是未知的Action，实际上这是UEditor默认的Action，上面我们有看到 if (action == 'uploadimage' ||action== 'uploadscrawl' || action == 'uploadimage') {....} else if(action =='uploadvideo') {....} else if(action == 'listimage'){....} else{returnthis._bkGetActionUrl.call(this, action);}}

if语句里面的这些，对应的就是默认的action名称，说到这里，大家应该知道了吧，要自定义上传什么就在这个script里面加if语句来判断即可，实在没有，它就返回 this._bkGetActionUrl.call(this,action); 这个东西我想你应该要有，否则没找到你设置的action它本地也上传不了。

例如:现在上面我自己定义,图片上传的control 请求的/knowsource/action

视频上传的请求路径 /knowsource/actionForVideo

上传视频路径

下面会介绍,怎么定义上传图片和视频的请求路径.

//图片上传路径. config.json文件中.imageActionName 命名要和上面介绍if 中action 名称一致,不认进不去判断. 就不会自己设计的请求路径发送请求.

单个图片上传.一般不会有太多问题.

介绍一下多图片上传,和视频上传的注意修改的位置.

=============多图片上传 ==打开ueditor/dialogs/image/image.js 文件===============

696行. 修改代码

uploader.on('all',function(type, files) {

switch(type) {

case'uploadFinished':

setState('confirm', files);

break;

case'startUpload':

/* 添加额外的GET参数 */

varparams= utils.serializeParam(editor.queryCommandValue('serverparam')) || '',

// url = utils.formatUrl(actionUrl + (actionUrl.indexOf('?') == -1 ? '?':'&') + 'encode=utf-8&' + params);

url=utils.formatUrl(actionUrl);//TODO 修改多图片上传路径

uploader.option('server',url);

setState('uploading', files);

break;

case'stopUpload':

setState('paused', files);

break;

}

});

=============视频上传 ==打开ueditor/dialogs/video/video.js 文件===============

707行

uploader.on('all',function(type, files) {

switch(type) {

case'uploadFinished':

setState('confirm', files);

break;

case'startUpload':

/* 添加额外的GET参数 */

varparams= utils.serializeParam(editor.queryCommandValue('serverparam')) || '',

/* url = utils.formatUrl(actionUrl + (actionUrl.indexOf('?') == -1 ? '?':'&') + 'encode=utf-8&' + params);*/

url=utils.formatUrl(actionUrl);

uploader.option('server',url);

setState('uploading', files);

break;

case'stopUpload':

setState('paused', files);

break;

}

});

=====================后端代码====================

pom依赖

<dependency>

<groupId>cn.songxinqiang</groupId>

<artifactId>com.baidu.ueditor</artifactId>

<version>1.1.2-offical</version>

</dependency>

<dependency>

<groupId>org.json</groupId>

<artifactId>json</artifactId>

<version>20160810</version>

</dependency>

<dependency>

<groupId>commons-io</groupId>

<artifactId>commons-io</artifactId>

<version>2.4</version>

</dependency>

<dependency>

<groupId>commons-fileupload</groupId>

<artifactId>commons-fileupload</artifactId>

<version>1.3.1</version>

</dependency>

<dependency>

<groupId>commons-codec</groupId>

<artifactId>commons-codec</artifactId>

<version>1.9</version>

</dependency>

===============Controller=============

packagecom.ampmind.front.crm.web.controller;

importcom.ampmind.framework.api.base.Response;

importcom.ampmind.service.crm.rpc.KnowledgeBaseService;

importcom.ampmind.service.crm.rpc.protocol.KnowledgeBaseModel;

importcom.ampmind.service.ois.clinet.OisHelper;

importcom.ampmind.service.ois.constant.ChannelType;

importcom.ampmind.service.ois.model.ResponseModel;

importcom.ampmind.service.ois.rpc.OisService;

importcom.ampmind.service.ois.utils.OisUtil;

importorg.slf4j.Logger;

importorg.slf4j.LoggerFactory;

importorg.springframework.beans.factory.annotation.Autowired;

importorg.springframework.http.MediaType;

importorg.springframework.stereotype.Controller;

importorg.springframework.web.bind.annotation.RequestMapping;

importorg.springframework.web.bind.annotation.RequestMethod;

importorg.springframework.web.bind.annotation.ResponseBody;

importorg.springframework.web.multipart.MultipartFile;

importorg.springframework.web.multipart.MultipartHttpServletRequest;

importorg.springframework.web.multipart.MultipartRequest;

importjavax.servlet.http.HttpServletRequest;

importjava.io.IOException;

importjava.io.InputStream;

importjava.util.HashMap;

importjava.util.Map;

importjava.util.Set;

/**

* Ueditor 百度富文本编辑器,(demo)

* 作用:提供开发百度富文本使用

*@Auther:WangYongKun

*@Date2017/11/13 0013

@Controller

@RequestMapping("knowsource")

public classUeditorControllerextendsCrmBasicController {

private finalLogger logger= LoggerFactory.getLogger(UeditorController.class);

@Autowired

privateOisHelperoisHelper;

@Autowired

privateOisServiceoisService;

@Autowired

privateKnowledgeBaseServiceknowledgeBaseService;

/**

* 文件上传方法

*@paramrequest

*@return

publicString uploadFile(HttpServletRequest request) {

String url =null;

try{

MultipartRequest mr = (MultipartRequest)request;

Map<String, MultipartFile> map = mr.getFileMap();

Set<String> keySet = map.keySet();

for(String key : keySet) {

MultipartFile multipartFile = map.get(key);

String type = multipartFile.getContentType();

InputStream inputStream = multipartFile.getInputStream();

String base64 = OisUtil.getString(inputStream);

//阿里云配置.无须关系

ResponseModel model =oisHelper.upload("CRM_PIC", base64, multipartFile.getOriginalFilename(), "/CRM/Path", ChannelType.PUBLIC,900,true,null,null);

if(model.getStatus()) {

url =oisService.getPublicFileUrl(String.valueOf( model.getResult()));

}

returnurl;

}catch(RuntimeException e){

logger.info("","系统异常：{}", e);

return null;

}catch(IOException e){

logger.info("","系统异常：{}", e);

return null;

}

//==================图片上传======================

@RequestMapping(value = "/action", method = RequestMethod.POST, produces = MediaType.APPLICATION_JSON_VALUE)

@ResponseBody

publicMap<String,Object> save(HttpServletRequest req){

Map<String,Object> rs =newHashMap<String, Object>();

MultipartHttpServletRequest mReq =null;

MultipartFile file =null;

InputStream is =null;

String fileName ="";

// 原始文件名 UEDITOR创建页面元素时的alt和title属性

String originalFileName ="";

String filePath ="";

try{

mReq = (MultipartHttpServletRequest)req;

// 从config.json中取得上传文件的ID

file = mReq.getFile("upfile");

// 取得文件的原始文件名称

fileName = file.getOriginalFilename();

originalFileName = fileName;

String s =this.uploadFile(req);

/*你的处理图片的代码*/

rs.put("state","SUCCESS");// UEDITOR的规则:不为SUCCESS则显示state的内容

rs.put("url",s);//能访问到你现在图片的路径

rs.put("title", originalFileName);

rs.put("original", originalFileName);

}catch(Exception e) {

logger.error("图片上次失败",e);

rs.put("state","文件上传失败!");//在此处写上错误提示信息，这样当错误的时候就会显示此信息

rs.put("url","");

rs.put("title","");

rs.put("original","");

}

returnrs;

}

/////actionForVideo 上传视频的action

@RequestMapping(value = "/actionForVideo", method = RequestMethod.POST, produces = MediaType.APPLICATION_JSON_VALUE)

@ResponseBody

publicMap<String,Object> saveVideo(HttpServletRequest req){

Map<String,Object> rs =newHashMap<String, Object>();

MultipartHttpServletRequest mReq =null;

MultipartFile file =null;

InputStream is =null;

String fileName ="";

String originalFileName ="";

String filePath ="";

try{

mReq = (MultipartHttpServletRequest)req;

// 从config.json中取得上传文件的ID

file = mReq.getFile("upfile");

// 取得文件的原始文件名称

fileName = file.getOriginalFilename();

originalFileName = fileName;

String returnPath =this.uploadFile(req);//封装好的服务

rs.put("state","SUCCESS");// UEDITOR的规则:不为SUCCESS则显示state的内容

rs.put("url",returnPath);//返回上传到服务红的成功路径

rs.put("title", originalFileName);

rs.put("original", originalFileName);

}catch(Exception e) {

logger.error("文件上次失败",e);

rs.put("state","文件上传失败!");

rs.put("url","");

rs.put("title","");

rs.put("original","");

}

returnrs;

}

==========点击图片组件反应慢的问题==============

修改 ueditor.all.js 中 [accept=image/* 修改为accept="image/jpg,image/jpeg,image/png".

注意点:

1.对于图片 ,和视频格式参照Ueditor 官方文档.

2.注意 ueditor 配置文件引入顺序

3.对图片和视频路径.

如果采取上面的自定义的方式请求controller 的话,需要更改 image.js和video.js 的上传路径.

4.注意返回值,遵守官网地址的规范.(因为百度的ueditor 中的写好的返回值,例如:成功接受SUCCESS)

{ "state": "SUCCESS", "url": "upload/demo.jpg", "title": "demo.jpg", "original": "demo.jpg"}

官方文档还是要看的,有坑就填.

文章中没有提及到怎么上传到阿里云上操作.这是公司封装好服务,不便介绍.

上传图片和视频成功demo页面

我也是看了被人的博客得到部分帮助,希望在加上自己的一点东西,继续为uedittor的使用多一个解决方案.

希望对您有帮助.

UEditor 图片视频上传

相关推荐