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

这样就可以进行上传了。


  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
实现Spring Boot和ueditor1.4.33的附件上传至本地的步骤如下: 1. 添加ueditor1.4.33的jar包依赖,在pom.xml中添加以下代码: ```xml <dependency> <groupId>com.baidu.ueditor</groupId> <artifactId>ueditor</artifactId> <version>1.4.3</version> </dependency> ``` 2. 配置ueditor,在resources目录下创建config.json文件,添加以下代码: ```json { "imageActionName": "uploadimage", "imageFieldName": "upfile", "imageMaxSize": 2048000, "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], "imageCompressEnable": true, "imageCompressBorder": 1600, "imageInsertAlign": "none", "imageUrlPrefix": "", "imagePathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", "scrawlActionName": "uploadscrawl", "scrawlFieldName": "upfile", "scrawlPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", "scrawlMaxSize": 2048000, "scrawlUrlPrefix": "", "scrawlInsertAlign": "none", "snapscreenActionName": "uploadimage", "snapscreenPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", "snapscreenUrlPrefix": "", "snapscreenInsertAlign": "none", "catcherLocalDomain": ["127.0.0.1", "localhost", "img.baidu.com"], "catcherActionName": "catchimage", "catcherFieldName": "source", "catcherPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", "catcherUrlPrefix": "", "catcherMaxSize": 2048000, "catcherAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], "videoActionName": "uploadvideo", "videoFieldName": "upfile", "videoPathFormat": "/ueditor/jsp/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}", "videoUrlPrefix": "", "videoMaxSize": 102400000, "videoAllowFiles": [ ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg", ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid" ], "fileActionName": "uploadfile", "fileFieldName": "upfile", "filePathFormat": "/ueditor/jsp/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}", "fileUrlPrefix": "", "fileMaxSize": 51200000, "fileAllowFiles": [ ".png", ".jpg", ".jpeg", ".gif", ".bmp", ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg", ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid", ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso", ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml" ], "imageManagerActionName": "listimage", "imageManagerListPath": "/ueditor/jsp/upload/image/", "imageManagerListSize": 20, "imageManagerUrlPrefix": "", "imageManagerInsertAlign": "none", "imageManagerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], "fileManagerActionName": "listfile", "fileManagerListPath": "/ueditor/jsp/upload/file/", "fileManagerUrlPrefix": "", "fileManagerListSize": 20, "fileManagerAllowFiles": [ ".png", ".jpg", ".jpeg", ".gif", ".bmp", ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg", ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid", ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso", ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml" ] } ``` 3. 在Controller中添加上传附件的方法,例如: ```java @Controller @RequestMapping("/file") public class FileController { @PostMapping("/upload") @ResponseBody public Map<String, Object> uploadFile(HttpServletRequest request, HttpServletResponse response) { // 获取配置文件路径 String rootPath = request.getSession().getServletContext().getRealPath("/"); String configPath = rootPath + "config.json"; // 创建配置对象 ConfigManager configManager = ConfigManager.getInstance(rootPath, "http://localhost:8080/ueditor/jsp"); try { // 初始化配置 configManager.initEnv(configPath); } catch (Exception e) { e.printStackTrace(); return null; } // 创建上传对象 UEditorUploader uploader = new BinaryUploader(configManager, request, response); // 执行上传 Map<String, Object> result = uploader.doExec(); return result; } } ``` 4. 在前端页面中使用ueditor上传附件,例如: ```html <!-- 加载ueditor --> <script type="text/javascript" src="/ueditor/ueditor.config.js"></script> <script type="text/javascript" src="/ueditor/ueditor.all.js"></script> <!-- 创建ueditor实例 --> <script type="text/javascript"> var ue = UE.getEditor('editor'); </script> <!-- 创建上传按钮 --> <div class="btn btn-primary" onclick="chooseFile()">上传文件</div> <!-- 上传文件 --> <script type="text/javascript"> function chooseFile() { // 创建表单对象 var formData = new FormData(); // 获取文件对象 var file = document.getElementById("file").files[0]; // 添加文件到表单中 formData.append("upfile", file); // 发送ajax请求 $.ajax({ url: "/file/upload", type: "POST", data: formData, cache: false, contentType: false, processData: false, success: function (result) { if (result.state === "SUCCESS") { // 上传成功,将附件地址添加到ueditor中 ue.execCommand('insertHtml', '<a href="' + result.url + '">' + result.title + '</a>'); } else { alert("上传失败"); } } }); } </script> ``` 以上就是实现Spring Boot和ueditor1.4.33的附件上传至本地的完整步骤。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值