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. 注意引入的顺序.

代码:

<!-- 配置文件 -->

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

<!-- 编辑器源码文件 -->

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

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

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

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

< script type= "text/javascript" >

var ue = 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参数 */

var params = 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参数 */

var params = 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依赖

<!-- ueditor 依赖包-start-->

< 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 >

<!-- ueditor 依赖包-end-->

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

package com.ampmind.front.crm.web.controller;

import com.ampmind.framework.api.base.Response;

import com.ampmind.service.crm.rpc.KnowledgeBaseService;

import com.ampmind.service.crm.rpc.protocol.KnowledgeBaseModel;

import com.ampmind.service.ois.clinet.OisHelper;

import com.ampmind.service.ois.constant.ChannelType;

import com.ampmind.service.ois.model.ResponseModel;

import com.ampmind.service.ois.rpc.OisService;

import com.ampmind.service.ois.utils.OisUtil;

import org.slf4j.Logger;

import org.slf4j.LoggerFactory;

import org.springframework.beans.factory.annotation. Autowired ;

import org.springframework.http.MediaType;

import org.springframework.stereotype. Controller ;

import org.springframework.web.bind.annotation. RequestMapping ;

import org.springframework.web.bind.annotation.RequestMethod;

import org.springframework.web.bind.annotation. ResponseBody ;

import org.springframework.web.multipart.MultipartFile;

import org.springframework.web.multipart.MultipartHttpServletRequest;

import org.springframework.web.multipart.MultipartRequest;

import javax.servlet.http.HttpServletRequest;

import java.io.IOException;

import java.io.InputStream;

import java.util.HashMap;

import java.util.Map;

import java.util.Set;

/**

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

*

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

*

* @Auther :WangYongKun

* @Date 2017/11/13 0013

*/

@Controller

@RequestMapping ( "knowsource" )

public class UeditorController extends CrmBasicController {

private final Logger logger = LoggerFactory. getLogger (UeditorController. class );

@Autowired

private OisHelper oisHelper ;

@Autowired

private OisService oisService ;

@Autowired

private KnowledgeBaseService knowledgeBaseService ;

/**

* 文件上传方法

* @param request

* @return

*/

public String 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()));

}

}

return url;

} 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

public Map<String,Object> save(HttpServletRequest req){

Map<String,Object> rs = new HashMap<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" , "" );

}

return rs;

}

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

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

@ResponseBody

public Map<String,Object> saveVideo(HttpServletRequest req){

Map<String,Object> rs = new HashMap<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" , "" );

}

return rs;

}

}

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

修改 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的使用多一个解决方案.

希望对您有帮助.