kindeditor 上传图片后端成功了,web显示上传失败 ,已解决

别人是什么都懂,然后写上代码教大家怎么做,而我只是一个被自己蠢哭的啥都不会的yang

今天我就来告诉大家,被自己蠢哭是啥意思

  • springboot实现图片上传,我以前不知道原来是有kindeditor这个html在线编辑器
    大概长这样,这只是部分截图啊,红圈那个就是多图片上传的按钮
    在这里插入图片描述
  • 尽然有这个,那就引入被
    http://kindeditor.net/demo.php

要在页面实现上面的样子,首先你要在XXXX.html里面引入textare俗称富文本编辑,代码如下:

 <div class="form-group">
      <textarea id="editor" style="width: 100%; height: 650px;"
       th:utext="${info!=null and info.DetailContent !=null}?${info.DetailContent}: ''"></textarea>
 </div>

然后就是在upFile.js中这样写

KindEditor.ready(function(K){

        editor = K.create("textarea[id='editor']",{

            resizeType : 1,

            allowPreviewEmoticons: false,

            allowImageUpload:true,//允许上传图片

            allowFileManager:true, //允许对上传图片进行管理

            uploadJson:  '/admin/upload/file', //上传图片的java代码

            fileManagerJson: '/admin/upload/file',

            afterUpload: function(){this.sync();}, //图片上传后,将上传内容同步到textarea中

            afterBlur: function(){this.sync();},   失去焦点时,将上传内容同步到textarea中

            items : [

                'fontname','fontsize', '|','forecolor', 'hilitecolor','bold', 'italic','underline',

                'removeformat','|', 'justifyleft','justifycenter', 'justifyright','insertorderedlist',

                'insertunorderedlist','|', 'emoticons','link','media','|','multiimage', 'table', 'baidumap'],
            filePostName:'file'

        });
}

然后就是controller.java了

 @PostMapping({"/upload/file"})
    @ResponseBody
    public ApiResult upload(HttpServletRequest httpServletRequest, @RequestParam("file") MultipartFile file) throws URISyntaxException {
        String fileName = file.getOriginalFilename();
        String suffixName = fileName.substring(fileName.lastIndexOf("."));
        //生成文件名称通用方法
        SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd_HHmmss");
        Random r = new Random();
        StringBuilder tempName = new StringBuilder();
        tempName.append(sdf.format(new Date())).append(r.nextInt(100)).append(suffixName);
        String newFileName = tempName.toString();
        File fileDirectory = new File(Constants.FILE_UPLOAD_DIC);
        //创建文件,这里Costants是一个常量配置的java文件,FILE_UPLOAD_DIC是自定义地址eg:'D:\\upload\\'
        File destFile = new File(Constants.FILE_UPLOAD_DIC + newFileName);
        try {
            if (!fileDirectory.exists()) {
                fileDirectory.getParentFile().mkdir();
                if (!fileDirectory.mkdir()) {
                    throw new IOException("文件夹创建失败,路径为:" + fileDirectory);
                }
            }
            file.transferTo(destFile);
            //这里是json格式的东西,你也可以返回一个实体,网上方法挺多的
            ApiResult resultSuccess = ResultGenerator.genSuccessResult();
            resultSuccess.setData(JrunningUtils.getHost(new URI(httpServletRequest.getRequestURL() + "")) + "/api/public/images/" + newFileName);
            System.out.println("图片上传成功");
            return resultSuccess;
        } catch (IOException e) {
            e.printStackTrace();
            return ResultGenerator.genFailResult("文件上传失败");
        }
    }
  • 然后就是启动项目了
    在这里插入图片描述
    问题解决来了
    点完开始上传。然后就成这样了
    在这里插入图片描述
    一看后端控制台,sout输出的“图片上传成功”也在啊。
    看了一下kindEditor-all.js
    在这里插入图片描述
    看了我的ResultGenerator.genFailResult返回的json没有err啊
    然后我就改成这样了
    在这里插入图片描述
    再启动,我mmp,一天了终于出来了
    在这里插入图片描述
    在这里插入图片描述

心情美美哒,然后CSDN记录一下

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值