python222网站实战(SpringBoot+SpringSecurity+MybatisPlus+thymeleaf+layui)-ckeditor集成图片上传实现

锋哥原创的Springboot+Layui python222网站实战：

python222网站实战课程视频教程（SpringBoot+Python爬虫实战） ( 火爆连载更新中... )_哔哩哔哩_bilibilipython222网站实战课程视频教程（SpringBoot+Python爬虫实战） ( 火爆连载更新中... )共计23条视频，包括：python222网站实战课程视频教程（SpringBoot+Python爬虫实战） ( 火爆连载更新中... )、第2讲 架构搭建实现、第3讲 页面系统属性动态化设计实现等，UP主更多精彩视频，请关注UP账号。https://www.bilibili.com/video/BV1yX4y1a7qM/ckeditor默认是不支持本地图片上传的。我们需要设置下，开启本地图片上传。

找到ckeditor/plugins/image/dialogs/image.js文件 打开

然后搜索 id:"Upload",hidden 默认值是!0 我们改成0即可

刷新页面，点击那个上传图片图标，

然后我们配置下上传后台请求路径

找到ckeditor下的config.js 打开

config.filebrowserImageUploadUrl="/admin/article/ckeditorUpload";

配置下

帖子图片请求和本地图片要做一个虚拟路径映射配置。

application.yml配置：

articleImagesFilePath: D:\\articleImages\\

WebAppConfigurer

加下：

@Value("${articleImagesFilePath}")
private String articleImagesFilePath;

registry.addResourceHandler("/articleImages/**").addResourceLocations("file:"+articleImagesFilePath);  //  自定义帖子映射

ArticleAdminController加下 文件处理方法；

@Value("${articleImagesFilePath}")
private String articleImagesFilePath;

/**
 * 上传图片
 * @param file
 * @return
 */
@RequestMapping("/ckeditorUpload")
public Map<String,Object> ckeditorUpload(@RequestParam("upload") MultipartFile file, String CKEditorFuncNum)throws Exception{
    Map<String, Object> resultMap = new HashMap<>();
 
    // 获取文件名
    String fileName = file.getOriginalFilename();
    // 获取文件的后缀名
    String suffixName = fileName.substring(fileName.lastIndexOf("."));
    String newFileName= DateUtil.getCurrentDateStr()+suffixName;
    FileUtils.copyInputStreamToFile(file.getInputStream(), new File(articleImagesFilePath+newFileName));
 
    resultMap.put("uploaded",1);
    resultMap.put("fileName",newFileName);
    resultMap.put("url","/articleImages/"+newFileName);
 
    return resultMap;
}