UEditor（Jsp版） + SpringMVC使用小结（进阶篇）—— 转存图片到指定主机

目录

1、简介

2、环境准备

3、编写代码

---

1、简介

本篇着重说明，使用UEditor将图片上传到指定主机（图片服务器），并从图片服务器下载图片的写法。如果您想看基本配置，请移步作者的另外一篇博文：UEditor（Jsp版） + SpringMVC使用小结（基础篇）。

2、环境准备

eclipse + Maven + SpringMVC + UEditor(Jsp版)

3、编写代码

在js文件中加入如下代码

$(function() {
	initUeditorUploadUrl();
}

/**
 * 初始化富文本编辑器上传图片路径
 */
function initUeditorUploadUrl(){
	UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
	UE.Editor.prototype.getActionUrl = function (action) {
	    if (action == 'uploadimage') {
	        $("#baseurl").val() + "/fileuploadUeditor";
	    } else {
	        return this._bkGetActionUrl.call(this, action);
	    }
	};
}

添加自己的controller.java，将图片或者其他附件发送到这个controller中，然后在上传到指定的图片服务器中，就可以了。

package com.myproject.system;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.json.JSONObject;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import com.myproject.service.file.FileUploadInter;

@Controller
public class FileuploadController {

	@Autowired
	private FileUploadInter fileUploadInter;
	
	@RequestMapping(value="/fileuploadUeditor")
	public void fileUploadUeditor(HttpServletResponse response,HttpServletRequest request){
		JSONObject jObject = fileUploadInter.fileUploadUeditor(request);
		response.setContentType("text/plain; charset=utf-8");
		try
		{
			jObject.write(response.getWriter());
		}
		catch(Exception e){
			return ;
		}
	}
}

图片服务器的代码这里不提供了，需要读者自己复用原项目或者写一个。

注意事项：

使用自己的controller，需要遵循UEditor的接口规范，即要求有四个返回值分别是state,url,title,original,例如这个格式：

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

通过map转json返回就行，例如：

Map<String, Object> retMap = new HashMap<String, Object>();
retMap.put("state", "SUCCESS");// ueditor的规则:不为SUCCESS则显示state的内容
retMap.put("url", storage_browseurl + resObject.getString("result")); //能访问到图片的路径
retMap.put("title", originalFileName); //
retMap.put("original", originalFileName);

return new JSONObject(retMap);

另外ueditor.all.js文件24525行的源码（如下图），图片回显路径是imageUrlPrefix和后台返回url拼接的

所以需要修改配置文件config.json，将"imageUrlPrefix"调整为空

"imageUrlPrefix": "", /* 图片访问路径前缀 */

通过以上的设置和调整，可以满足图片上传到指定服务器，并从中读取图片了。