springboot+ueditor

最新推荐文章于 2025-11-10 02:40:31 发布

原创最新推荐文章于 2025-11-10 02:40:31 发布 · 2.6k 阅读

2 ·

CC 4.0 BY-SA版权

Java 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何解决SpringBoot项目中使用UEditor时遇到的配置错误及上传问题，包括路径配置、前后端交互实现及具体代码示例。

首先是springboot的项目

到官网下载

解压

放到

一直出现 “ueditor.all.min.js:9 后台配置项返回格式出错，上传功能将不能正常使用！”

似乎是路径不对，原始配置是

无法找到config.json

于是自己写与后台的交互

1.路径修改

2.建后台control，写一个方法里面读取config.json.即

PublicMsg.UEDITOR_CONFIG的内容

@RequestMapping(value = "/ueditor")
	@ResponseBody
	public String ueditor(HttpServletRequest request) {

		return PublicMsg.UEDITOR_CONFIG;
	}

3.现在不会报上面的错误了。也可点击图片选择了，然后不能上传，现在我们在用户这个编辑器的页面，加入这段js

UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function(action) {
    if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadimage') {
        return 'http://127.0.0.1:8081/imgUpload';//指定访问路径
    } else if (action == 'uploadvideo') {
        return 'http://a.b.com/video.php';
    } else {
        return this._bkGetActionUrl.call(this, action);
    }
}

4.后台需要这个方法

imgUpload来做文件上传

@RequestMapping(value = "/imgUpload")
	@ResponseBody
	public Map<String, Object> imgUpload(HttpServletRequest req) {
		Map<String, Object> rs = new HashMap<String, Object>();
		MultipartHttpServletRequest mReq = null;
		MultipartFile file = null;
		String fileName = "";
		// 原始文件名 UEDITOR创建页面元素时的alt和title属性
		String originalFileName = "";
		try {
			mReq = (MultipartHttpServletRequest) req;
			// 从config.json中取得上传文件的ID
			file = mReq.getFile("upfile");

			if (!file.isEmpty()) {
				// 取得文件的原始文件名称
				fileName = file.getOriginalFilename();
				originalFileName = fileName;

				String ext = (FilenameUtils.getExtension(file
						.getOriginalFilename())).toLowerCase();
				String storePath = "";
				if ("jpg".equals(ext) || "png".equals(ext)
						|| "jpeg".equals(ext) || "bmp".equals(ext)) {
					storePath = "upload/image/";
				} else {
					storePath = "upload/video/";
				}
				System.out.println(storePath + "----storePath");
				// 将图片和视频保存在本地服务器
				String pathRoot = req.getSession().getServletContext()
						.getRealPath("");
				String path = pathRoot + "/" + storePath;
				System.out.println(pathRoot + "----pathRoot");
				File dest = new File(path + fileName);
				if (!dest.getParentFile().exists()) {
					dest.getParentFile().mkdirs();
				}
				file.transferTo(dest);
				String doMain = "http://127.0.0.1:"+port+"/";
				String httpImgPath = doMain + storePath + fileName;

				rs.put("state", "SUCCESS");// UEDITOR的规则:不为SUCCESS则显示state的内容
				rs.put("url", httpImgPath); // 能访问到你现在图片的路径
				rs.put("title", originalFileName);
				rs.put("original", originalFileName);
			}

		} catch (Exception e) {
			e.printStackTrace();
			rs.put("state", "文件上传失败!"); // 在此处写上错误提示信息，这样当错误的时候就会显示此信息
			rs.put("url", "");
			rs.put("title", "");
			rs.put("original", "");
		}
		return rs;
	}

这样就可以进行上传了。