- 效果图:
- 操作流程
这里是借助layUi的富文本框。
插入图片的时候有个上传的动作,后台保存到本地然后把项目的路径返回到前端
最后传输到后台netty的是图片路径
-
工具
使用layui的富文本框
layedit.set({
uploadImage: {
url: '${httpServletRequest.getContextPath()}/fileUpload/imageUpload' //接口url
,type: 'post' //默认post
}
});
后端文件接收
public String ckeditorUpload(HttpServletRequest request,@RequestParam("file") MultipartFile file) throws Exception {
//获取跟目录
File path = new File(ResourceUtils.getURL("classpath:").getPath());
if(!path.exists()) path = new File("");
System.out.println("path:"+path.getAbsolutePath());
//如果上传目录为/static/images/upload/,则可以如下获取:
File upload = new File(path.getAbsolutePath(),"static/images/upload/");
if(!upload.exists()) upload.mkdirs();
System.out.println("upload url:"+upload.getAbsolutePath());
// 获取文件名
String fileName = file.getOriginalFilename();
// 获取文件的后缀名
String suffixName = fileName.substring(fileName.lastIndexOf("."));
//实际处理肯定是要加上一段唯一的字符串(如现在时间),这里简单加 cun
String uuid = UUID.randomUUID().toString().replace("-", "").toLowerCase();
String newFileName = uuid + suffixName;
//使用架包 common-io实现图片上传
FileUtils.copyInputStreamToFile(file.getInputStream(), new File(upload.getAbsolutePath()+File.separator + newFileName));
//实现图片回显,基本上是固定代码,只需改路劲即可
Map<String,Object> resultMap=new HashMap<String,Object>();
Map<String,Object> fileMap=new HashMap<String,Object>();
resultMap.put("code", "0");
resultMap.put("msg", "上传成功");
resultMap.put("data", fileMap);
fileMap.put("src", request.getContextPath()+File.separator +"static/images/upload/"+ newFileName);
fileMap.put("title", newFileName);
ObjectMapper mapper = new ObjectMapper();
String result=mapper.writeValueAsString(resultMap);
return result;
}