springBoot整合kindeditor图片上传

本文介绍了如何在SpringBoot应用中集成KindEditor,并详细阐述了配置application.yml以设置图片上传路径,添加必要的jar包,以及前端和Controller的相关设置步骤。
摘要由CSDN通过智能技术生成

application.yml先配置路径

虚拟路径配置


@Configuration
public class WebMvcConfig extends WebMvcConfigurerAdapter {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        //文件磁盘图片url 映射
        //配置server虚拟路径,handler为前台访问的目录,locations为files相对应的本地路径
        // registry.addResourceHandler("/attached/**").addResourceLocations("file:D:/img/attached/");
        registry.addResourceHandler("/attached/**").addResourceLocations("file:/var/local/attached/");
    }
}

导入jar

前端(其它配置可以去kinEditor官网)

 

Controller

@RestController
public class UtilsController {

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

    private String getError(String message) {
        JSONObject obj = new JSONObject();
        obj.put("error", 1);
        obj.put("message", message);
        return obj.toJSONString();
    }

    @RequestMapping("/uploadJson")
    public void uploadJson(HttpServletRequest request, HttpServletResponse response, String dir) throws Exception {
        response.setContentType("application/json; charset=UTF-8");
        PrintWriter out = response.getWriter();
        MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
        Map<String, MultipartFile> fileMap = multipartRequest.getFileMap();
        //文件保存目录路径
        String savePath = uploadPrefix + "/attached/";

        //文件保存目录URL
        String saveUrl = uploadPrefix + "/attached";

        System.out.println(savePath);
        System.out.println(saveUrl);

        //定义允许上传的文件扩展名
        HashMap<String, String> extMap = new HashMap<String, String>();
        extMap.put("image", "gif,jpg,jpeg,png,bmp");
        extMap.put("flash", "swf,flv");
        extMap.put("media", "swf,flv,mp3,wav,wma,wmv,mid,avi,m
  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
KindEditor是一款基于JavaScript的富文本编辑器,它可以方便地集成到网站中,并支持图片上传功能。在Spring Boot中实现KindEditor图片上传可以按照以下步骤进行: 1. 在Spring Boot中添加以下依赖: ```xml <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.4</version> </dependency> ``` 2. 创建一个Controller用于处理图片上传请求,代码如下: ```java @RestController @RequestMapping("/upload") public class FileUploadController { @PostMapping("/image") public String uploadImage(HttpServletRequest request) throws Exception { MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request; MultipartFile file = multipartRequest.getFile("imgFile"); String filename = file.getOriginalFilename(); String suffix = filename.substring(filename.lastIndexOf(".") + 1); String newFilename = UUID.randomUUID().toString() + "." + suffix; String savePath = "D:/upload/images/" + newFilename; // 上传文件保存路径,根据实际情况修改 File destFile = new File(savePath); if (!destFile.getParentFile().exists()) { destFile.getParentFile().mkdirs(); } file.transferTo(destFile); String url = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + "/upload/images/" + newFilename; // 图片访问URL,根据实际情况修改 return "{\"error\":0,\"url\":\"" + url + "\"}"; } } ``` 3. 在HTML页面中集成KindEditor,并设置图片上传的请求地址,代码如下: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>KindEditor图片上传示例</title> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/kindeditor/4.1.11/kindeditor-all.min.css" /> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/kindeditor/4.1.11/kindeditor-all.min.js"></script> </head> <body> <textarea id="editor"></textarea> <script> KindEditor.ready(function(K) { K.create('#editor', { uploadJson: '/upload/image', allowFileManager: false }); }); </script> </body> </html> ``` 4. 启动Spring Boot应用,访问HTML页面即可进行图片上传。上传的图片会保存在指定的路径中,并返回图片的访问URL给KindEditor进行显示。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值