在APP中,介绍类文章都是图文混排形式展示。本文分享Spring Boot + Thymeleaf + UEditor图文上传。
第一步:下载并配置UEditor
1、UEditor下载地址:http://ueditor.baidu.com/website/download.html (选择对应的版本和开发语言下载)
2、配置UEditor
1)、解压下载文件,将目录jsp\src下的java源码拷贝到项目src目录下;
2)、在pom.xml文件中配置ueditor对应的依赖包
<dependency>
<groupId>org.json</groupId>
<artifactId>json</artifactId>
</dependency>
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.2</version>
</dependency>
<dependency>
<groupId>commons-codec</groupId>
<artifactId>commons-codec</artifactId>
<version>1.9</version>
</dependency>
3)、将解压缩文件下config.json文件拷贝到resources/static目录下;
4)、将ueditor相应的包和js文件拷贝到resources/static目录下,如lang、themes、third-party、ueditor.all.js等;
5)、修改配置文件(config.json)。修改字段"imageUrlPrefix : localhost:8081",该路径为访问路径;
6)、修改配置文件(ueditor.config.js)。找到字段"serverUrl : localhost:8081/config",该路径用来读取配置文件。注:要与controller层中读取配置文件路径一致,下文会提到
第二步:实例化UEditor对象,并在页面展示
1)、在resources/templates下创建目录ueditor目录测试UEditor,新建uploadImg.html文件。在文件中引入UEditor插件<script id="adtContent" name="adtContent" type="text/plain" style="width:100%;height:500px;"></script>
2)、实例化插件,并配置基本信息:
var ue = UE.getEditor('adtContent',{
toolbars:[['touppercase','tolowercase','forecolor','justifyleft','justifyright','justifycenter','justifyjustify','Undo', 'Redo','cleardoc','selectall','time','date','searchreplace','spechars','link','preview','simpleupload']],
//focus时自动清空初始化时的内容
autoClearinitialContent:true,
//关闭字数统计
wordCount:false,
//关闭elementPath
elementPathEnabled:false,
//默认的编辑区域高度
initialFrameHeight:400
//更多其他参数,请参考ueditor.config.js中的配置项
});
3)、启动服务器,并访问http://localhost:8080/ueditor/uploadImg.html,如下图表示实例化成功
第三步:单个图片文件的上传
1、读取配置信息(UEditorController.java),即上问提到的ueditor.config.js的读取,对应"serverUrl: 'http://localhost:8080/config'"。关键代码如下:
@RequestMapping(value="/config")
public void config(HttpServletRequest request, HttpServletResponse response) {
response.setContentType("application/json");
String rootPath = request.getSession().getServletContext().getRealPath("/");
try {
String exec = new ActionEnter(request, rootPath).exec();
PrintWriter writer = response.getWriter();
writer.write(exec);
writer.flush();
writer.close();
} catch (IOException e) {
logger.error("读取配置文件失败,异常信息为:{0}" + e);
}
}
2、服务端图片上传
@RequestMapping(value = "/imgUpdate")
@ResponseBody
public String imgUpdate(MultipartFile upfile) throws FileNotFoundException {
File path = new File(ResourceUtils.getURL("classpath:").getPath());
String imgPath = path.getAbsolutePath() + "\\static\\img\\";
if(!path.exists()) path = new File("");
if (upfile.isEmpty()) {
return "error";
}
String fileName = upfile.getOriginalFilename(); // 获取文件名
String suffixName = fileName.substring(fileName.lastIndexOf(".")); // 获取文件的后缀名
fileName = Calendar.getInstance().getTimeInMillis() + StrUtil.createRandom(true, 6) + suffixName;
File dest = new File(imgPath + fileName);
if (!dest.getParentFile().exists()) { // 检测是否存在目录
dest.getParentFile().mkdirs();
}
try {
upfile.transferTo(dest); // 上传图片
ObjectMapper mapper = new ObjectMapper();
HashMap<String,Object> configs = new HashMap<String,Object>();
configs.put("state", "SUCCESS");
configs.put("url", datdDirectory + newFileName);
configs.put("title", newFileName);
configs.put("original", newFileName);
return mapper.writeValueAsString(configs);
} catch (IllegalStateException e) {
logger.error(e.toString());
} catch (IOException e) {
logger.error(e.toString());
}
return "error";
}
3、前端图片上传关键代码
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function(action) {
if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadimage') {
return 'http://localhost:8080/imgUpdate'; //在这里返回我们实际的上传图片地址
} else {
return this._bkGetActionUrl.call(this, action);
}
}
如图所示则表示成功