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; } }