百度编辑器UEditor 图片上传到资源服务器 JSP（将重新整理）

最近学习UEditor，开始的时候以为很简单，但是等到需要将图片和资源上传到资源服务器的时候发现遇到很多问题，所以现在学习总结一下，整理思路，这篇文章需要持续修改。本文基于spring框架开发

一、下载配置UEditor

1:下载UEditor 

下载地址：http://ueditor.baidu.com/website/download.html

百度编辑器有很多的版本


我们选择一款自己适用的就可以

按照流程将UEditor拷贝到我们的项目中



路径可以自己定义保存

2：将UEditor引入到页面中

在UEditor中有一个index.html页面，里面有一个样式，我们可以参展index.html内容引入

<script type="text/javascript" charset="utf-8" src="js/UEditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="js/UEditor/ueditor.all.min.js"> </script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8" src="js/UEditor/lang/zh-cn/zh-cn.js"></script>

引入相关的js，我们就在jsp页面需要的位置可以插入富文本编辑器了

<div>
<h1>完整demo</h1>
<script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>
</div>

我们需要写js控制UEditor

//实例化编辑器
//建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
var ue = UE.getEditor('editor');

3：将UEditor文件中的js包的lib包下有jar包，我们需要将jar包导入到我们的项目中，可以将lib中的jar包放到WEB-INF的lib包下



在UEditor中的index.html中都要例子，可以参考

二、UEditor上传图片到服务器

1：上传到指定路径

我们需要将我们的图片上传到指定的地址，就要去配置路径。

在UEditor中有ueditor.config.js，我们需要修改里面的配置



主要配置下面三行

,imageUrl: "/controller" //图片上传提交后台对应的地址，路径固定为*/controller.*
,imagePath: "/ueditor/" //图片在服务器上的存储目录
,imageFieldName: "upload" //后台对应接收image的参数名

controller为我们上传的controller（我们的配置基于spring）

2：上传controller代码（配置类）

package com.diyvc.controller.common;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

import com.diyvc.common.util.Uploader;

@Controller
@RequestMapping("/umeditor")
public class UploadController {

@RequestMapping(value = "/upload/", method = { RequestMethod.POST })
public void upload(HttpServletRequest request, HttpServletResponse response)
throws Exception {

request.setCharacterEncoding("utf-8");
response.setContentType("text/html");
response.setCharacterEncoding("utf-8");

Uploader up = new Uploader(request);
up.setSavePath("upload");
String[] fileType = { ".gif", ".png", ".jpg", ".jpeg", ".bmp" };
up.setAllowFiles(fileType);
up.setMaxSize(10000); // 单位KB
up.upload();

String callback = request.getParameter("callback");

String result = "{\"name\":\"" + up.getFileName()
+ "\", \"originalName\": \"" + up.getOriginalName()
+ "\", \"size\": " + up.getSize() + ", \"state\": \""
+ up.getState() + "\", \"type\": \"" + up.getType()
+ "\", \"url\": \"" + up.getUrl() + "\"}";

result = result.replaceAll("\\\\", "\\\\");

if (callback == null) {
response.getWriter().print(result);
} else {
response.getWriter().print(
"<script>" + callback + "(" + result + ")</script>");
}
}

}

3：文件上传辅助类Uploader

package com.diyvc.common.util;

import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.BufferedReader;
import java.io.File;
import java.io.FileOutputStream;
import java.io.InputStreamReader;
import java.io.OutputStream;
import java.text.SimpleDateFormat;
import java.util.Arrays;
import java.util.Date;
import java.util.HashMap;
import java.util.Iterator;
import java.util.Random;

import javax.servlet.http.HttpServletRequest;

import org.apache.commons.fileupload.FileItemIterator;
import org.apache.commons.fileupload.FileItemStream;
import org.apache.commons.fileupload.FileUploadBase.InvalidContentTypeException;
import org.apache.commons.fileupload.FileUploadBase.SizeLimitExceededException;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.commons.fileupload.util.Streams;

import sun.misc.BASE64Decoder;
/**
* UEditor文件上传辅助类
*
*/
public class Uploader {
// 输出文件地址
private String url = "";
// 上传文件名
private String fileName = "";
// 状态
private String state = "";
// 文件类型
private String type = "";
// 原始文件名
private String originalName = "";
// 文件大小
private long size = 0;

private HttpServletRequest request = null;
private String title = "";

// 保存路径
private String savePath = "upload";
// 文件允许格式
private String[] allowFiles = { ".rar", ".doc", ".docx", ".zip", ".pdf",".txt", ".swf", ".wmv", ".gif", ".png", ".jpg", ".jpeg", ".bmp" };
// 文件大小限制，单位KB
private int maxSize = 10000;

private HashMap<String, String> errorInfo = new HashMap<String, String>();

public Uploader(HttpServletRequest request) {
this.request = request;
HashMap<String, String> tmp = this.errorInfo;
tmp.put("SUCCESS", "SUCCESS"); //默认成功
tmp.put("NOFILE", "未包含文件上传域");
tmp.put("TYPE", "不允许的文件格式");
tmp.put("SIZE", "文件大小超出限制");
tmp.put("ENTYPE", "请求类型ENTYPE错误");
tmp.put("REQUEST", "上传请求异常");
tmp.put("IO", "IO异常");
tmp.put("DIR", "目录创建失败");
tmp.put("UNKNOWN", "未知错误");

}

public void upload() throws Exception {
boolean isMultipart = ServletFileUpload.isMultipartContent(this.request);
if (!isMultipart) {
this.state = this.errorInfo.get("NOFILE");
return;
}
DiskFileItemFactory dff = new DiskFileItemFactory();
String savePath = this.getFolder(this.savePath);
dff.setRepository(new File(savePath));
try {
ServletFileUpload sfu = new ServletFileUpload(dff);
sfu.setSizeMax(this.maxSize * 1024);
sfu.setHeaderEncoding("utf-8");
FileItemIterator fii = sfu.getItemIterator(this.request);
while (fii.hasNext()) {
FileItemStream fis = fii.next();
if (!fis.isFormField()) {
this.originalName = fis.getName().substring(fis.getName().lastIndexOf(System.getProperty("file.separator")) + 1);
if (!this.checkFileType(this.originalName)) {
this.state = this.errorInfo.get("TYPE");
continue;
}
this.fileName = this.getName(this.originalName);
this.type = this.getFileExt(this.fileName);
this.url = savePath + "/" + this.fileName;
BufferedInputStream in = new BufferedInputStream(fis.openStream());
File file = new File(this.getPhysicalPath(this.url));
FileOutputStream out = new FileOutputStream( file );
BufferedOutputStream output = new BufferedOutputStream(out);
Streams.copy(in, output, true);
this.state=this.errorInfo.get("SUCCESS");
this.size = file.length();
//UE中只会处理单张上传，完成后即退出
ImageCut.resizeByWidth(file);
FTPClientUtil.upload(file, savePath + "/");
break;
} else {
String fname = fis.getFieldName();
//只处理title，其余表单请自行处理
if(!fname.equals("pictitle")){
continue;
}
BufferedInputStream in = new BufferedInputStream(fis.openStream());
BufferedReader reader = new BufferedReader(new InputStreamReader(in));
StringBuffer result = new StringBuffer();
while (reader.ready()) {
result.append((char)reader.read());
}
this.title = new String(result.toString().getBytes(),"utf-8");
reader.close();

}
}
} catch (SizeLimitExceededException e) {
this.state = this.errorInfo.get("SIZE");
} catch (InvalidContentTypeException e) {
this.state = this.errorInfo.get("ENTYPE");
} catch (FileUploadException e) {
this.state = this.errorInfo.get("REQUEST");
} catch (Exception e) {
this.state = this.errorInfo.get("UNKNOWN");
}
}

/**
* 接受并保存以base64格式上传的文件
* @param fieldName
*/
public void uploadBase64(String fieldName){
String savePath = this.getFolder(this.savePath);
String base64Data = this.request.getParameter(fieldName);
this.fileName = this.getName("test.png");
this.url = savePath + "/" + this.fileName;
BASE64Decoder decoder = new BASE64Decoder();
try {
File outFile = new File(this.getPhysicalPath(this.url));
OutputStream ro = new FileOutputStream(outFile);
byte[] b = decoder.decodeBuffer(base64Data);
for (int i = 0; i < b.length; ++i) {
if (b[i] < 0) {
b[i] += 256;
}
}
ro.write(b);
ro.flush();
ro.close();
this.state=this.errorInfo.get("SUCCESS");
} catch (Exception e) {
this.state = this.errorInfo.get("IO");
}
}

/**
* 文件类型判断
*
* @param fileName
* @return
*/
private boolean checkFileType(String fileName) {
Iterator<String> type = Arrays.asList(this.allowFiles).iterator();
while (type.hasNext()) {
String ext = type.next();
if (fileName.toLowerCase().endsWith(ext)) {
return true;
}
}
return false;
}

/**
* 获取文件扩展名
*
* @return string
*/
private String getFileExt(String fileName) {
return fileName.substring(fileName.lastIndexOf("."));
}

/**
* 依据原始文件名生成新文件名
* @return
*/
private String getName(String fileName) {
Random random = new Random();
return this.fileName = "" + random.nextInt(10000)
+ System.currentTimeMillis() + this.getFileExt(fileName);
}

/**
* 根据字符串创建本地目录 并按照日期建立子目录返回
* @param path
* @return
*/
private String getFolder(String path) {
SimpleDateFormat formater = new SimpleDateFormat("yyyyMMdd");
path += "/" + formater.format(new Date());
File dir = new File(this.getPhysicalPath(path));
if (!dir.exists()) {
try {
dir.mkdirs();
} catch (Exception e) {
this.state = this.errorInfo.get("DIR");
return "";
}
}
return path;
}

/**
* 根据传入的虚拟路径获取物理路径
*
* @param path
* @return
*/
private String getPhysicalPath(String path) {
String servletPath = this.request.getServletPath();
String realPath = this.request.getSession().getServletContext()
.getRealPath(servletPath);
return new File(realPath).getParent() +"/" +path;
}

public void setSavePath(String savePath) {
this.savePath = savePath;
}

public void setAllowFiles(String[] allowFiles) {
this.allowFiles = allowFiles;
}

public void setMaxSize(int size) {
this.maxSize = size;
}

public long getSize() {
return this.size;
}

public String getUrl() {
return this.url;
}

public String getFileName() {
return this.fileName;
}

public String getState() {
return this.state;
}

public String getTitle() {
return this.title;
}

public String getType() {
return this.type;
}

public String getOriginalName() {
return this.originalName;
}
}

4:FTPClientUtil FTP客户端工具类

我们上传图片到资源服务器，需要配置FTP工具，使用FTP上传资源，这里我们需要引入commons-lang-2.4.jar

package com.diyvc.common.util;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.net.SocketException;
import java.util.HashMap;
import java.util.Map;
import java.util.Properties;

import org.apache.commons.lang.StringUtils;
import org.apache.commons.net.ftp.FTP;
import org.apache.commons.net.ftp.FTPClient;
import org.apache.commons.net.ftp.FTPReply;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

/**
* FTP客户端工具
*/
public class FTPClientUtil {

/**
* 日志
*/
private static final Logger LOGGER = LoggerFactory.getLogger(FTPClientUtil.class);

/**
* FTP server configuration--IP key,value is type of String
*/
public static final String SERVER_IP = "SERVER_IP";

/**
* FTP server configuration--Port key,value is type of Integer
*/
public static final String SERVER_PORT = "SERVER_PORT";

/**
* FTP server configuration--ANONYMOUS Log in key, value is type of Boolean
*/
public static final String IS_ANONYMOUS = "IS_ANONYMOUS";

/**
* user name of anonymous log in
*/
public static final String ANONYMOUS_USER_NAME = "anonymous";

/**
* password of anonymous log in
*/
public static final String ANONYMOUS_PASSWORD = "";

/**
* FTP server configuration--log in user name, value is type of String
*/
public static final String USER_NAME = "USER_NAME";

/**
* FTP server configuration--log in password, value is type of String
*/
public static final String PASSWORD = "PASSWORD";

/**
* FTP server configuration--PASV key, value is type of Boolean
*/
public static final String IS_PASV = "IS_PASV";

/**
* FTP server configuration--working directory key, value is type of String While logging in, the current directory
* is the user's home directory, the workingDirectory must be set based on it. Besides, the workingDirectory must
* exist, it can not be created automatically. If not exist, file will be uploaded in the user's home directory. If
* not assigned, "/" is used.
*/
public static final String WORKING_DIRECTORY = "WORKING_DIRECTORY";

public static Map<String, Object> serverCfg = new HashMap<String, Object>();

static Properties prop;

static{
LOGGER.info("开始加载ftp.properties文件!");
prop = new Properties();
try {
InputStream fps = FTPClientUtil.class.getResourceAsStream("/ftp.properties");
prop.load(fps);
fps.close();
} catch (Exception e) {
LOGGER.error("读取ftp.properties文件异常!",e);
}
serverCfg.put(FTPClientUtil.SERVER_IP, values("SERVER_IP"));
serverCfg.put(FTPClientUtil.SERVER_PORT, Integer.parseInt(values("SERVER_PORT")));
serverCfg.put(FTPClientUtil.USER_NAME, values("USER_NAME"));
serverCfg.put(FTPClientUtil.PASSWORD, values("PASSWORD"));
LOGGER.info(String.valueOf(serverCfg));
}

/**
* Upload a file to FTP server.
*
* @param serverCfg : FTP server configuration
* @param filePathToUpload : path of the file to upload
* @param fileStoredName : the name to give the remote stored file, null, "" and other blank word will be replaced
*            by the file name to upload
* @throws IOException
* @throws SocketException
*/
public static final void upload(Map<String, Object> serverCfg, String filePathToUpload, String fileStoredName)
throws SocketException, IOException {
upload(serverCfg, new File(filePathToUpload), fileStoredName);
}

/**
* Upload a file to FTP server.
*
* @param serverCfg : FTP server configuration
* @param fileToUpload : file to upload
* @param fileStoredName : the name to give the remote stored file, null, "" and other blank word will be replaced
*            by the file name to upload
* @throws IOException
* @throws SocketException
*/
public static final void upload(Map<String, Object> serverCfg, File fileToUpload, String fileStoredName)
throws SocketException, IOException {
if (!fileToUpload.exists()) {
throw new IllegalArgumentException("File to upload does not exists：" + fileToUpload.getAbsolutePath());
}
if (!fileToUpload.isFile()) {
throw new IllegalArgumentException("File to upload is not a file:" + fileToUpload.getAbsolutePath());
}
if (StringUtils.isBlank((String) serverCfg.get(SERVER_IP))) {
throw new IllegalArgumentException("SERVER_IP must be contained in the FTP server configuration.");
}
transferFile(true, serverCfg, fileToUpload, fileStoredName, null, null);
}

/**
* Download a file from FTP server
*
* @param serverCfg : FTP server configuration
* @param fileNameToDownload : file name to be downloaded
* @param fileStoredPath : stored path of the downloaded file in local
* @throws SocketException
* @throws IOException
*/
public static final void download(Map<String, Object> serverCfg, String fileNameToDownload, String fileStoredPath)
throws SocketException, IOException {
if (StringUtils.isBlank(fileNameToDownload)) {
throw new IllegalArgumentException("File name to be downloaded can not be blank.");
}
if (StringUtils.isBlank(fileStoredPath)) {
throw new IllegalArgumentException("Stored path of the downloaded file in local can not be blank.");
}
if (StringUtils.isBlank((String) serverCfg.get(SERVER_IP))) {
throw new IllegalArgumentException("SERVER_IP must be contained in the FTP server configuration.");
}
transferFile(false, serverCfg, null, null, fileNameToDownload, fileStoredPath);
}

private static final void transferFile(boolean isUpload, Map<String, Object> serverCfg, File fileToUpload,
String serverFileStoredName, String fileNameToDownload, String localFileStoredPath) throws SocketException,
IOException {
String host = (String) serverCfg.get(SERVER_IP);
Integer port = (Integer) serverCfg.get(SERVER_PORT);
Boolean isAnonymous = (Boolean) serverCfg.get(IS_ANONYMOUS);
String username = (String) serverCfg.get(USER_NAME);
String password = (String) serverCfg.get(PASSWORD);
Boolean isPASV = (Boolean) serverCfg.get(IS_PASV);
String workingDirectory = (String) serverCfg.get(WORKING_DIRECTORY);
FTPClient ftpClient = new FTPClient();
InputStream fileIn = null;
OutputStream fileOut = null;
try {
if (port == null) {
LOGGER.debug("Connect to FTP server on " + host + ":" + FTP.DEFAULT_PORT);
ftpClient.connect(host);
} else {
LOGGER.debug("Connect to FTP server on " + host + ":" + port);
ftpClient.connect(host, port);
}
int reply = ftpClient.getReplyCode();
if (!FTPReply.isPositiveCompletion(reply)) {
LOGGER.error("FTP server refuses connection");
return;
}

if (isAnonymous != null && isAnonymous) {
username = ANONYMOUS_USER_NAME;
password = ANONYMOUS_PASSWORD;
}
LOGGER.debug("Log in FTP server with username = " + username + ", password = " + password);
if (!ftpClient.login(username, password)) {
LOGGER.error("Fail to log in FTP server with username = " + username + ", password = " + password);
ftpClient.logout();
return;
}

// Here we will use the BINARY mode as the transfer file type,
// ASCII mode is not supportted.
LOGGER.debug("Set type of the file, which is to upload, to BINARY.");
ftpClient.setFileType(FTP.BINARY_FILE_TYPE);

if (isPASV != null && isPASV) {
LOGGER.debug("Use the PASV mode to transfer file.");
ftpClient.enterLocalPassiveMode();
} else {
LOGGER.debug("Use the ACTIVE mode to transfer file.");
ftpClient.enterLocalActiveMode();
}

if (StringUtils.isBlank(workingDirectory)) {
workingDirectory = "/";
}

LOGGER.debug("Change current working directory to " + workingDirectory);
changeWorkingDirectory(ftpClient,workingDirectory);

if (isUpload) { // upload
if (StringUtils.isBlank(serverFileStoredName)) {
serverFileStoredName = fileToUpload.getName();
}
fileIn = new FileInputStream(fileToUpload);
LOGGER.debug("Upload file : " + fileToUpload.getAbsolutePath() + " to FTP server with name : "
+ serverFileStoredName);
if (!ftpClient.storeFile(serverFileStoredName, fileIn)) {
LOGGER.error("Fail to upload file, " + ftpClient.getReplyString());
} else {
LOGGER.debug("Success to upload file.");
}
} else { // download
// make sure the file directory exists
File fileStored = new File(localFileStoredPath);
if (!fileStored.getParentFile().exists()) {
fileStored.getParentFile().mkdirs();
}
fileOut = new FileOutputStream(fileStored);
LOGGER.debug("Download file : " + fileNameToDownload + " from FTP server to local : "
+ localFileStoredPath);
if (!ftpClient.retrieveFile(fileNameToDownload, fileOut)) {
LOGGER.error("Fail to download file, " + ftpClient.getReplyString());
} else {
LOGGER.debug("Success to download file.");
}
}

ftpClient.noop();

ftpClient.logout();

} finally {
if (ftpClient.isConnected()) {
try {
ftpClient.disconnect();
} catch (IOException f) {
}
}
if (fileIn != null) {
try {
fileIn.close();
} catch (IOException e) {
}
}
if (fileOut != null) {
try {
fileOut.close();
} catch (IOException e) {
}
}
}
}

private static final boolean changeWorkingDirectory(FTPClient ftpClient, String workingDirectory) throws IOException{
if(!ftpClient.changeWorkingDirectory(workingDirectory)){
String [] paths = workingDirectory.split("/");
for(int i=0 ;i<paths.length ;i++){
if(!"".equals(paths[i])){
if(!ftpClient.changeWorkingDirectory(paths[i])){
ftpClient.makeDirectory(paths[i]);
ftpClient.changeWorkingDirectory(paths[i]);
}
}
}
}
return true;
}

public static final void upload(Map<String, Object> serverCfg, String filePathToUpload, String fileStoredPath, String fileStoredName)
throws SocketException, IOException {
upload(serverCfg, new File(filePathToUpload), fileStoredPath, fileStoredName);
}

public static final void upload(Map<String, Object> serverCfg, File fileToUpload, String fileStoredPath, String fileStoredName)
throws SocketException, IOException {
if(fileStoredPath!=null && !"".equals(fileStoredPath)){
serverCfg.put(WORKING_DIRECTORY, fileStoredPath);
}
upload(serverCfg, fileToUpload, fileStoredName);
}

public static final void upload(String filePathToUpload, String fileStoredPath)throws SocketException, IOException {
upload(serverCfg, filePathToUpload, fileStoredPath, "");
}

public static final void upload(File fileToUpload, String fileStoredPath)throws SocketException, IOException {
upload(serverCfg, fileToUpload, fileStoredPath, "");
}

public static String values(String key) {
String value = prop.getProperty(key);
if (value != null)
return value;
} else {
return null;
}
}

}

5：配置ftp的配置信息文件ftp.properties

#服务器地址
#测试环境
SERVER_IP=192.168.1.1

#服务器端口
#测试环境
SERVER_PORT=21

#帐号名
#测试环境
USER_NAME=diyvcftp

#密码
#测试环境
PASSWORD=123456

这样我就就可以实现将UEditor上的图片或者其他资源保存到资源服务器上了。

将UEditor图片上传主要是两部，第一是配置umeditor.config.js，第二是配置图片上传和FTP工具。