ueditor官网下载jsp版本
包解压放在src/main/resources/static目录下
将config.json放在src/main/resources目录下
修改ueditor.config.js
原:
改为:
controller中添加让上诉配置找到config.json
//图片上传 跳转到配置文件
@RequestMapping(value = "config", headers = "Accept=application/json")
public String ueditor(@RequestParam("action") String action, @RequestParam("noCache") String nocache, HttpServletRequest request, HttpServletResponse response) {
try {
response.setContentType("application/json;charset=utf-8");
Resource resource = new ClassPathResource("config.json");
File file = resource.getFile();
BufferedReader br = new BufferedReader(new FileReader(file));
StringBuilder stringBuilder = new StringBuilder();
String line;
while ((line = br.readLine()) != null) {
stringBuilder.append(line);
}
return stringBuilder.toString();
} catch (Exception e) {
e.printStackTrace();
return "error";
}
}
图片上传处理代码
@RequestMapping("/uploadimage")
public Map<String, Object> upload(HttpServletRequest request, HttpServletResponse response, MultipartFile file) throws Exception {
Map<String, Object> rs = new HashMap<String, Object>();
String fileName = "";
String originalFileName = "";
try {
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)||"gif".equals(ext)) {
storePath = "upload/image/";
} else {
storePath = "upload/other/";
}
System.out.println(storePath + "----storePath");
// 将图片和视频保存在本地服务器
String pathRoot = request.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;
}
前端代码:
<script type="text/javascript">
var ue = UE.getEditor('container',{
// initialFrameWidth :800,//设置编辑器宽度
initialFrameHeight:700,//设置编辑器高度
scaleEnabled:true});
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function(action) {
if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadimage') {
return '/uploadimage';//指定访问路径
} else {
return this._bkGetActionUrl.call(this, action);
}
}
</script>
这里差不多就弄好了。
如果出现上传文件为空的情况检查config.json中的"imageFieldName"是否与后台controller中接收的file名字一致
不过在公司项目中获取的根路径是c盘下临时的tomcat路径,在自己测试的单独boot项目中是F盘的绝对路径
还有一点就是在公司项目中如果强行存到项目静态资源目录下会出现请求头问题而读不出图片,希望有大佬帮忙解决一下