springmvc + jsp 集成百度富文本ueditor编辑器上传图片

水深无声 2022-12-22 13:30 100阅读 0赞

使用的版本是1.4.3.3   框架是ssm

文件下载链接 [https://download.csdn.net/download/qq\_39313596/13130543][https_download.csdn.net_download_qq_39313596_13130543]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MzEzNTk2_size_16_color_FFFFFF_t_70][]

需要依赖的jar   如果是maven请在pom添加对应的  ueditor maven仓库没有下载 需要自己安装到maven仓库  json版本

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MzEzNTk2_size_16_color_FFFFFF_t_70 1][]

首先把这里面的东西复制到某个静态文件下面

如

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MzEzNTk2_size_16_color_FFFFFF_t_70 2][]

页面jsp代码 需要引入3个js

后端代码 sftp上传

/***
         * ueditor 图片 公用上传接口
         * @returnarray(
         * "state" => "",
         * 上传状态，上传成功时必须返回"SUCCESS"
         * "url" => "",            //返回的地址
         * "title" => "",          //新文件名
         * "original" => "",       //原始文件名
         * "type" => ""            //文件类型
         * "size" => "",           //文件大小
         * @throws IOException
         * @throws Exception
         */
        @RequestMapping(value = "ueditorUploadFile.do", method = {RequestMethod.POST, RequestMethod.GET})
        public Map<String, Object> ueditorUploadFile(HttpServletRequest request, HttpServletResponse response) throws IOException {
            request.setCharacterEncoding("utf-8");
            response.setHeader("Content-Type", "text/html");
            response.setContentType("text/html; charset=UTF-8");
            Map<String, Object> map = new HashMap<>();
            SFTPUtils sftp = null;
            String filepath = "images/ueditor";
            MultipartHttpServletRequest mReq = null;
            MultipartFile mfile = null;
            String fileName = "";
            String originalFileName = "";
            try {
                mReq = (MultipartHttpServletRequest) request;
                // 从config.json中取得上传文件的ID "imageFieldName": "upfile", /* 提交的图片表单名称 */
                mfile = mReq.getFile("upfile");
                if (!mfile.isEmpty()) {
                    originalFileName = mfile.getOriginalFilename();
                    String filePath = (String) PropertiesConfigurer.propertiesMap.get("url");
    
                    File file = new File(filepath);
                    boolean exists = file.exists();
                    if (!exists) file.mkdirs();
                 
                    sftp = new SFTPUtils((String) PropertiesConfigurer.propertiesMap.get("host")
                            , (String) PropertiesConfigurer.propertiesMap.get("user")
                            , (String) PropertiesConfigurer.propertiesMap.get("pwd"));
                    sftp.connect();
                    String dt = String.valueOf(new StringBuffer(String.valueOf(System.currentTimeMillis())).reverse());
                    if (mfile.getOriginalFilename() != null && mfile.getOriginalFilename().trim().length() > 0 && checkFile(mfile.getOriginalFilename().split("\\.")[1])) {
                        fileName = IdUtil.objectId() + dt + Math.random() + "." + mfile.getOriginalFilename().split("\\.")[1];
                        sftp.uploadFile(filepath, fileName, mfile);
                        //图片url
                        map.put("state", "SUCCESS"); // UEDITOR的规则:不为SUCCESS则显示state的内容
                        map.put("url", filePath + filepath + "/" + fileName); //能访问到你现在图片的路径
                        map.put("title", fileName);
                        map.put("original", originalFileName);
                        map.put("size", String.valueOf(mfile.getSize()));
                        //map.put("type", ".jpg");
                        map.put("type", "." + mfile.getOriginalFilename().split("\\.")[1]);
                        return map;
                    } else {
                        map.put("state", "文件不存在!"); //在此处写上错误提示信息，这样当错误的时候就会显示此信息
                        map.put("url", "");
                        map.put("title", "");
                        map.put("original", "");
                        map.put("size", "0");
                        map.put("type", "");
                        return map;
                    }
                } else {
                    map.put("state", "文件不存在!"); //在此处写上错误提示信息，这样当错误的时候就会显示此信息
                    map.put("url", "");
                    map.put("title", "");
                    map.put("original", "");
                    map.put("size", "0");
                    map.put("type", "");
                    return map;
                }
            } catch (Exception ex) {
                logger.error("保存出现异常", ex);
                map.put("state", "文件上传失败!"); //在此处写上错误提示信息，这样当错误的时候就会显示此信息
                map.put("url", "");
                map.put("title", "");
                map.put("original", "");
                map.put("size", "0");
                map.put("type", "");
                return map;
            } finally {
                sftp.disconnect();
            }
        }

‘

效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MzEzNTk2_size_16_color_FFFFFF_t_70 3][]’

[https_download.csdn.net_download_qq_39313596_13130543]: https://download.csdn.net/download/qq_39313596/13130543
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MzEzNTk2_size_16_color_FFFFFF_t_70]: /images/20221120/fca8f4bafc974f0fa18f1290a485727d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MzEzNTk2_size_16_color_FFFFFF_t_70 1]: /images/20221120/0d7bb0fd2ff24ee9ad2dab2ae781b374.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MzEzNTk2_size_16_color_FFFFFF_t_70 2]: /images/20221120/35ecedf8525b470a8a6d0b27a4f52370.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MzEzNTk2_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201120164221891.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MzEzNTk2,size_16,color_FFFFFF,t_70