配合七牛云简易使用kindeditor编辑器的图片上传功能

项目中使用到kindeditor富文本编辑器，项目后端用的springboot框架，图片服务器用的是七牛云。简单介绍一下如何将kindeditor编辑器的图片上传功能与七牛结合起来用。

一、kindeditor配置

将kindeditor引入到项目中是很简单的，官网就有很清楚的demo，就不赘述了，需要说一下的就是kindeditor的初始化配置

KindEditor.ready(function (K) {
        window.editor = K.create('#editor_id', {
            height: '600px',
            themeType: 'default',
            allowPreviewEmoticons: false,
            allowImageUpload: true,
            allowFileManager: true,
            uploadJson: '/operation/news/uploadImage.do',
            afterUpload: function () {
                this.sync()
            },
            items: [
                'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'link', 'unlink', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen','/', 'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold','italic', 'underline', 'strikethrough', 'lineheight', 'removeformat','|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript','superscript'
            ]
        });
    });

这里uploadJson参数我填的是项目中图片上传controller的mapping地址,其余初始化参数的配置请参考kindeditor的官方文档http://kindeditor.net/docs/option.html#id113

二、后台实现图片上传

    @ResponseBody
    @PostMapping("/uploadImage.do")
    public Map<String, Object> uploadImage(@RequestParam(required = false) MultipartFile imgFile) {
        try {
             Map<String, Object> succMap = new HashMap<>();
            String imgUrl = QiniuUtil.uploadFile(imgFile.getInputStream());
            succMap.put("error", 0);
            succMap.put("url", imgUrl);
            return succMap;
        } catch (Exception e){
            Map<String, Object> msg = new HashMap<String, Object>();
            msg.put("error", 1);
            msg.put("message", "<font size='3'>您选择的文件上传失败！</font>");
            return msg;
        }
    }

七牛上传文件参考其官方api，是很方便的，配置好accessKey、secretKey、bucket、domain即可
这是我封装在QiniuUtil里的文件上传方法

    // 上传文件并返回文件的url
    public static String uploadFile(InputStream in) {
        Configuration cfg = new Configuration(Zone.zone0());
        UploadManager uploadManager = new UploadManager(cfg);
        Auth auth = Auth.create(accessKey, secretKey);
        String upToken = auth.uploadToken(bucket);
        DefaultPutRet putRet = null;
        try {
            //这里不传key，云端用hash值作为文件名
            Response response = uploadManager.put(in, null, upToken, null, null);
            // 解析上传成功的结果
            putRet = new Gson().fromJson(response.bodyString(), DefaultPutRet.class);
            LOGGER.debug("上传成功,key:{},hash:{}", putRet.key, putRet.hash);
        } catch (QiniuException ex) {
            Response r = ex.response;
            LOGGER.debug("上传出错，{}" + r.toString());
        }
        return domain + putRet.key;
    }

这里需要注意的是图片文件的参数名需要定义为imgFile，否则controller将接收不到图片文件（不要问我怎么知道的，说多了都是泪T_T）。