kindeditor嵌入JSP中编辑并上传图片到阿里云OSS（s）

最近项目有一个在管理平台上传新闻资讯的需求。SSM框架。使用kindeditor编辑器嵌入到jsp，文章中所有图片都上传到阿里云上然后返回url作为img标签直接跟文章内容一起存到数据库。大菜鸟一只，终于搞出来了，现在记录一下供大家参考。

1、官网下载kindeditor。

2、jsp页面引用

<script src="<%=basePath%>/js/fileUpload/fileinput.min.js"></script>
<script src="<%=basePath%>/js/fileUpload/zh.js"></script>

3、html文本域：

<textarea style="resize: vertical;height:300px" id="content" name="content" class="form-control" ></textarea>

4、js中初始化编辑器：

var editor;
var options = {
    cssPath: '../kindeditor-4.1.10/plugins/code/prettify.css',
    filterMode: true,
    resizeType:1,
    allowPreviewEmoticons:false,
    allowImageUpload : true,
    allowFileManager : true,
    uploadJson: '${basePath}/userCard/newsUpload/upload.do',//上传图片到阿里云的接口
    fileManagerJson: '<%=basePath%>kindeditor-4.1.10/jsp/file_manager_json.jsp',
    afterUpload:function () {
        this.sync();
    },
    afterBlur:function () {
        this.sync();
    },
    width: '100%',
    height: '300px',
    items: [
        'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
        'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
        'insertunorderedlist', '|', 'emoticons', 'link','media','|', 'image']
};
KindEditor
    .ready(function (K) {
        editor = K.create('#content', options);
    });

前端页面就是这么简单啦。然后请求到后台保存图片到阿里云返回url。

5、后台Service实现层代码：

public void upload(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException, FileUploadException {
    try {
        PrintWriter out = response.getWriter();
        MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
        Iterator item = multipartRequest.getFileNames();
        while (item.hasNext()) {
            String fileName = (String) item.next();
            MultipartFile file = multipartRequest.getFile(fileName);
            OSSClientUtil ossClient = new OSSClientUtil();
            String name = ossClient.uploadImg2Oss(file, FILEDIR);
            //上传图片到阿里云并返回图片url
            String imgUrl = ossClient.getImgUrl(name, FILEDIR);
            JSONObject obj = new JSONObject();
            obj.put("error", 0);
            obj.put("url", imgUrl);
            out.println(obj.toString());
        }
    } catch (Exception e) {
        LOGGER.error("上传图片异常");
        getError("上传图片失败");
    }
}

6、阿里云上传图片工具类：

package com.decent.jyk.util;

import com.aliyun.oss.OSSClient;
import com.aliyun.oss.model.ObjectMetadata;
import com.aliyun.oss.model.PutObjectResult;
import com.decent.jyk.weixinAdmin.controller.CustomerController;
import org.apache.commons.lang3.StringUtils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.web.multipart.MultipartFile;

import java.io.*;
import java.net.URL;
import java.util.Date;

/**
 * 阿里云OSS工具类:
 *
 */
public class OSSClientUtil {
    private static final Logger log = LoggerFactory.getLogger(CustomerController.class);
    // endpoint以杭州为例，其它region请按实际情况填写
    private String endpoint = "http://oss-cn-hangzhou.aliyuncs.com";
    // accessKey
    private String accessKeyId = "";
    private String accessKeySecret = "";
    //空间
    private String bucketName = "";
    private OSSClient ossClient;
    public OSSClientUtil() {
        ossClient = new OSSClient(endpoint, accessKeyId, accessKeySecret);
    }
    /**
     * 初始化
     */
    public void init() {
        ossClient = new OSSClient(endpoint, accessKeyId, accessKeySecret);
    }
    /**
     * 销毁
     */
    public void destory() {
        ossClient.shutdown();
    }
    /**
     * 上传图片
     *
     * @param file    图片
     * @param fileDir oss服务器上文件夹
     * @return
     * @throws Exception
     */
    public String uploadImg2Oss(MultipartFile file, String fileDir) throws Exception {
        if (file.getSize() > 1024 * 1024) {
            throw new Exception("上传图片大小不能超过1M！");
        }
        String originalFilename = file.getOriginalFilename();
        try {
            InputStream inputStream = file.getInputStream();
            this.uploadFile2OSS(inputStream, originalFilename, fileDir);
            return originalFilename;
        } catch (Exception e) {
            throw new Exception("图片上传失败");
        }
    }
    /**
     * 获得图片路径
     *
     * @param fileUrl
     * @return
     */
    public String getImgUrl(String fileUrl, String filedir) {
        if (!StringUtils.isEmpty(fileUrl)) {
            String[] split = fileUrl.split("/");
            return this.getUrl(filedir + split[split.length - 1]);
        }
        return null;
    }

    /**
     * 上传到OSS服务器  如果同名文件会覆盖服务器上的
     *
     * @param instream 文件流
     * @param fileName 文件名称 包括后缀名
     * @return 出错返回"" ,唯一MD5数字签名
     */
    public String uploadFile2OSS(InputStream instream, String fileName, String fileDir) {
        String ret = "";
        try {
            //创建上传Object的Metadata
            ObjectMetadata objectMetadata = new ObjectMetadata();
            objectMetadata.setContentLength(instream.available());
            objectMetadata.setCacheControl("no-cache");
            objectMetadata.setHeader("Pragma", "no-cache");
            objectMetadata.setContentType(getcontentType(fileName.substring(fileName.lastIndexOf("."))));
            objectMetadata.setContentDisposition("inline;filename=" + fileName);
            //上传文件
            PutObjectResult putResult = ossClient.putObject(bucketName, fileDir + fileName, instream, objectMetadata);
            ret = putResult.getETag();
        } catch (IOException e) {
            log.error(e.getMessage(), e);
        } finally {
            try {
                if (instream != null) {
                    instream.close();
                }
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
        return ret;
    }
    /**
     * Description: 判断OSS服务文件上传时文件的contentType
     *
     * @param FilenameExtension 文件后缀
     * @return String
     */
    public static String getcontentType(String FilenameExtension) {
        if (FilenameExtension.equalsIgnoreCase(".bmp")) {
            return "image/bmp";
        }
        if (FilenameExtension.equalsIgnoreCase(".gif")) {
            return "image/gif";
        }
        if (FilenameExtension.equalsIgnoreCase(".jpeg") ||
                FilenameExtension.equalsIgnoreCase(".jpg") ||
                FilenameExtension.equalsIgnoreCase(".png")) {
            return "image/jpeg";
        }
        if (FilenameExtension.equalsIgnoreCase(".html")) {
            return "text/html";
        }
        if (FilenameExtension.equalsIgnoreCase(".txt")) {
            return "text/plain";
        }
        if (FilenameExtension.equalsIgnoreCase(".vsd")) {
            return "application/vnd.visio";
        }
        if (FilenameExtension.equalsIgnoreCase(".pptx") ||
                FilenameExtension.equalsIgnoreCase(".ppt")) {
            return "application/vnd.ms-powerpoint";
        }
        if (FilenameExtension.equalsIgnoreCase(".docx") ||
                FilenameExtension.equalsIgnoreCase(".doc")) {
            return "application/msword";
        }
        if (FilenameExtension.equalsIgnoreCase(".xml")) {
            return "text/xml";
        }
        if (FilenameExtension.equalsIgnoreCase(".apk")) {
            return "application/octet-stream";
        }
        return "image/jpeg";
    }
    /**
     * 获得url链接
     *
     * @param key
     * @return
     */
    public String getUrl(String key) {
        // 设置URL过期时间为10年  3600l* 1000*24*365*10
        Date expiration = new Date(System.currentTimeMillis() + 3600L * 1000 * 24 * 365 * 10);
        // 生成URL
        URL url = ossClient.generatePresignedUrl(bucketName, key, expiration);
        if (url != null) {
            return url.toString();
        }
        return null;
    }
}