UEditor Java 上传图片配置

不使用默认的ueditor-mini.jar进行上传，自定义上传
关于UEditor的搭建我这里就不用细说了，这个官网的例子很详细
这里只说配置上传，使用的springmvc
首先找到umeditor.config.js，找到下面这样的代码

 //为编辑器实例添加一个路径，这个不能被注释
        UMEDITOR_HOME_URL : URL

        //图片上传配置区
        ,imageUrl:URL+"jsp/imageUp.jsp"             //图片上传提交地址
        ,imagePath:URL + "jsp/"                     //图片修正地址，引用了fixedImagePath,如有特殊需求，可自行配置   
        ,imageFieldName:"upfile"                   //图片数据的key,若此处修改，需要在后台对应文件修改对应参数

现在来说一下上面的参数：
URL，这里指向的是你项目的ueditor文件夹
比如我的umeditor.js放在项目webroot/ueditor/umeditor.js这里，那么URL就是
HTTP://ip:port/webname/ueditor/，
当然具体的地址要根据你的配置文件而定
其中的imageFieldName:"upfile"这里的upfile就是<input type="file" name="upfile"/>这个upfile很重要，后台的数据就靠它获得，你这里修改了后台也要做相应处理
然后把上面的代码修改成指向自己写的contorller

 //为编辑器实例添加一个路径，这个不能被注释
        UMEDITOR_HOME_URL : URL

        //图片上传配置区
        ,imageUrl:root+"/upload/img"             //图片上传提交地址
       // ,imageUrl:URL+"jsp/imageUp.jsp"             //图片上传提交地址
       // ,imagePath:URL + "jsp/"                     //图片修正地址，引用了fixedImagePath,如有特殊需求，可自行配置
// 这里的imagePath就是下面的_file方法
// 其路径是root/upload/file/+result.url，result是上传返回的json
         ,imagePath:root + "/upload/file/"   
        ,imageFieldName:"upfile"                   //图片数据的key,若此处修改，需要在后台对应文件修改对应参数

里面的root是项目的根路径
/upload/img就是后台的controller处理地址
/upload/file/也是后台的处理地址，这个这里有一点要注意，我在controller里说明
接下来是/upload/img的controller

/**
* @upfile 就是上面提到的upfile，要对应一致
*/
@RequestMapping("/upload/img")
	@ResponseBody
	public String upload(@RequestParam("upfile") MultipartFile upfile,HttpServletRequest request, HttpServletResponse response) throws Exception {
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		String result = "";
		if(path == null) {
			System.out.println(">> the get file path error!");
			return result;
		}
		FileOutputStream out = null; 
		try {
			// 存放路径，如果不存在则创建路径
			File file = new File(rootPath);
			if(!file.exists()) file.mkdirs();
			// 随机生成文件名，oname是原始文件名称
			String fname = randomName(), 
				   oname = upfile.getOriginalFilename();
			out = new FileOutputStream(rootPath + "/" + fname);
			out.write(upfile.getBytes());
			out.close(); 
			//{"name":"10571402926855858.jpg", "originalName": "china.jpg", "size": 43086, "state": "SUCCESS", "type": ".jpg", "url": "upload/20140616/10571402926855858.jpg"}
			// result返回的url参照IndexController._file方法
			result = "{\"name\":\""+ fname +"\", \"originalName\": \""+ oname +"\", \"size\": "+ upfile.getSize() +", \"state\": \"SUCCESS\", \"type\": \""+FileUtils.getExt(oname)+"\", \"url\": \""+path + "_" + fname+"\"}";
			result = result.replaceAll( "\\\\", "\\\\" );
		} catch(Exception e) {
		} finally {
			out.close();
		}

		return result;
	}

这就是上传的controller处理方法，里面只有2点注意：
1）就是result的返回格式，可以参照官方的例子
2）就是result返回的url，这个具体说明请往下看

/**
	 * 获得图片
	 * @param path 图片路径：140615_xxx，格式为:datedir_filename
	 * @param request
	 * @param response
	 */
@RequestMapping(value = "/file/{path}")
	public @ResponseBody
	void _file(@PathVariable String path, HttpServletRequest request, HttpServletResponse response) {
                // 这个path就是上面result的url
                // 因为我是多层目录所以就使用了_下划线代替/
                // 主要就是注意路径要对应一致就行了
		path = path.replaceAll("_", "/");
		FileInputStream in = null;
		OutputStream out = null;
		try {
			File file = new File(rootPath + path);
			in = new FileInputStream(file);
			byte[] b = new byte[(int) file.length()];
			in.read(b);
			in.close();
			response.setContentType("image/*");
			out = response.getOutputStream();
			out.write(b);
			out.flush();
			out.close();
		} catch (IllegalArgumentException e) {
			e.printStackTrace();
		} catch (SecurityException e) {
			e.printStackTrace();
		} catch (IOException e) {
			e.printStackTrace();
		} finally {
			try {
				if (in != null)
					in.close();
				if (out != null)
					out.close();
			} catch (IOException e) {
				e.printStackTrace();
			}
		}
	}

评论

3 楼 junko2013 2015-04-17  

2 楼 xlaohe1 2014-11-06  

lifeiez 写道

请教高人：前台提交一个图片到后台，@RequestMapping("/upload/img") 处理完后，返回到前台一个字符串，前台要拿到这个字符串，拼成<img src="xxxxx">,这个拼装是在哪里处理的？

我看了一下代码，需要改一下代码。
方法如下：找到umeditor.js，在里面找到

UM.commands['insertimage'] = {
    execCommand:function (cmd, opt) {
		// TODO sth.
		// 这里写你要处理的事情
		// 上传图片成功后单击确定会调用这里
		// opt就是一个数组，每个元素有一个src和_src属性，其中src就是上传图片的地址
		// 所以可以在这里写自定义的一些函数，或一些处理方法

1 楼 lifeiez 2014-11-06  

请教高人：前台提交一个图片到后台，@RequestMapping("/upload/img") 处理完后，返回到前台一个字符串，前台要拿到这个字符串，拼成<img src="xxxxx">,这个拼装是在哪里处理的？