页面中我们有时候需要图文编辑来记录用户的多样化输入,所以不得不用到富文本编辑器,Ueditor是个不错的选择,不过它的图片上传功能有很多的坑需要注意,在这里我做一个详细的记录~
由于它的图片上传有点坑,所以这里我自定义了一个图片上传接口来代替它原有的~
首先把静态资源包导入到项目中
点击下载(不知为何设置不了积分,大家可以去官网下载)
有很多小伙伴可能会出现这种情况:
这可能是你忘了导入jar包或者依赖引起的,或者是你的配置有问题,重点放在下图的俩文件中
一般没有什么改动并且导入了依赖是不会出现这个情况的~
maven依赖:
<dependency>
<groupId>cn.songxinqiang</groupId>
<artifactId>com.baidu.ueditor</artifactId>
<version>1.1.2-offical</version>
</dependency>
接下来讲重点,如何在Ueditor中使用自定义的图片上传接口?
如果你前面已经没什么问题了,那么就可以开始下面的步骤了
首先需要在页面的js中定义上传图片的接口,页面就是你富文本的页面,不要想的太复杂~
拷贝进去修改一下接口地址就行~
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function(action) {
if (action == 'uploadimage' || action == 'uploadscrawl') {
return 'http://localhost:8080/ueditor/uploadimage';//这就是自定义的上传地址
} else if (action == 'uploadvideo') {
return '';
} else {
return this._bkGetActionUrl.call(this, action);
}
}
然后写一个对应的上传图片接口,如下:
@RequestMapping(value = "/uploadimage", method = RequestMethod.POST)
@ResponseBody
public Map<String, String> uploadimage(@RequestParam(value = "upfile") MultipartFile upfile) {
Map<String, String> map = new HashMap<>();
String fileName=upfile.getOriginalFilename();
SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmssSSS");
String filename = sdf.format(new Date()) + new Random().nextInt(1000);
String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();
filename=filename+"."+fileExt;//存入虚拟目录后的文件名
File uploadedFile = new File("D:\\file\\image", filename);//存入虚拟目录后的文件
try {
upfile.transferTo(uploadedFile);//上传
map.put("url", "/image/"+filename);//这个url是前台回显路径(回显路径为config.json中的imageUrlPrefix+此处的url)
map.put("state", "SUCCESS");
map.put("original", "");
} catch (IllegalStateException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return map;
}
大家只需要拷贝进项目然后修改一下接口中的地址以及 config.json中的imagePathFormat 即可!
其实只要你能在Ueditor上传图片的时候跳转到自定义的那个接口,你就以及成功百分之九十了,剩下的只是调整路径做回显
大家可以按f12在上传图片的时候看看上传与返回的路径,然后对应你自己的路径修改即可!
亲测结果: