springboot+maven+ueditor

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盘的绝对路径

还有一点就是在公司项目中如果强行存到项目静态资源目录下会出现请求头问题而读不出图片,希望有大佬帮忙解决一下

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值