summernote 的快速使用，以及解决图片写入数据库问题

summernote 是一款优秀的富文本编辑器，外观优雅，功能强大，使用便捷，支持图片自适应展示
官方网站 https://summernote.org/

但是插入图片时有个巨大缺陷，summernote默认是将图片转成base64的形式写入到数据库中
这样会给数据库造成巨大的存储量，经过多方改造，基本可以满足开发使用需要，附上代码

<div class="col-sm-12" style="padding: 0;">
<div id="summernote">$!{anInfo.answer}</div>
</div>
<script type="text/javascript">
$('#summernote').summernote({
   height : '220px',
   lang : 'zh-CN',
    callbacks: {
    onImageUpload: function(files,editor,$editable) {
            sendFile(this,files[0], editor,$editable);
    }
    }
});

//ajax上传图片
function sendFile(obj,file, editor,$editable) {
   var filename=false;
   try{
       filename=file['name'];
   }catch(e){
       filename=false;
   }
   if(!filename){
       $(".note-alarm").remove();
   }
   //防止重复提交
   var formData = new FormData();
formData.append("file", file);
   //formData.append("key",filename);//唯一参数性
   $.ajax({
       url: "$!{basePath}/fileUpload/uploadEditorImg.do",//路径是你控制器中上传图片的方法
       data: formData,
       cache: false,
       contentType: false,
processData: false,
       type: 'POST',
       success: function (data) {
           debugger;
           $(obj).summernote('insertImage', data.path);
       }
   });
}
</script>

//上传后台
@RequestMapping(value = "uploadEditorImg", method = { RequestMethod.POST, RequestMethod.GET })
@ResponseBody
public synchronized Map<String, Object> uploadEditorImg(HttpServletRequest request, HttpServletResponse response) throws Exception {
   MultipartHttpServletRequest mr = (MultipartHttpServletRequest) request;
   Map<String, Object> map = new HashMap<>();
   Iterator<String> iterator = mr.getFileNames();
   while (iterator.hasNext()) {
       MultipartFile multipartFile = mr.getFile(iterator.next());
       // 原文件名
       String oldFileName = multipartFile.getOriginalFilename();
       // 文件后缀
       String suffix = oldFileName.substring(oldFileName.lastIndexOf("."));
       // 文件夹
       String folder = sdf.format(new Date());
       // 文件相对路径 basePath=/opt
       String frontPath = basePath + File.separator + FileEnum.EDITOR + File.separator + folder;
       File dir = new File(frontPath);
       if (!dir.exists()) {
           dir.mkdirs();
       }
       // 新文件名称
       String newFileName = UUIDGenerator.getId() + suffix;
       File newFile = new File(frontPath + File.separator + newFileName);
       multipartFile.transferTo(newFile);
       map.put("oldFileName", oldFileName);
       map.put("newFileName", newFileName);
       map.put("filePath", folder + File.separator + newFileName);
       map.put("fullFilePath", frontPath + File.separator + newFileName);
       //domain.name=www.xxx.cn
       map.put("path", PropertieUtil.readProperty("domain.name") + "/fileUpload/showEditorImg.do?fullpath=" + folder + File.separator + newFileName);
       System.out.println(PropertieUtil.readProperty("domain.name") + "/fileUpload/showEditorImg.do?fullpath=" + folder + File.separator + newFileName);
   }
   return map;
}

//展示
@RequestMapping(value = "showEditorImg", method = { RequestMethod.POST, RequestMethod.GET })
@ResponseBody
public void showEditorImg(HttpServletRequest request, HttpServletResponse response) throws Exception {
   String fullpath = request.getParameter("fullpath"); // 文件名
   FileInputStream fileInputStream = null;
   OutputStream outStream = null;
   try {
       fileInputStream = new FileInputStream(basePath + File.separator + FileEnum.EDITOR + File.separator + fullpath);
       int i = fileInputStream.available(); // 得到文件大小
       byte data[] = new byte[i];
       fileInputStream.read(data); // 读数据
       response.setContentType("image/*"); // 设置返回的文件类型
       outStream = response.getOutputStream(); // 得到向客户端输出二进制数据的对象
       outStream.write(data); // 输出数据
   } catch (Exception e) {
       LogUtil.error("系统找不到文件：" + fullpath);
   } finally {
       if (outStream != null) {
           outStream.flush();
           outStream.close();
       }
       if (fileInputStream != null) {
           fileInputStream.close();
       }
   }

}

注：默认插入图片时是以px设置宽度，这样没法满足自适应要求，注意单击图片选择百分比，PC端和移动端展示都可以满足自适应

summernote 的快速使用，以及解决图片写入数据库问题相关推荐

java 二进制图片上传_Spring MVC上传图片，Java二进制图片写入数据库，生成略缩图...
背景描述:最近做到一个项目,有个商品登记功能.登记的信息包括:基本信息若干(文字信息):图片信息,要求将图片保存到数据表中的image字段(sql server 数据库) 步骤:1.将图片上传到服务器 ...
【mysql基础知识】解决java写入数据库时中文乱码的问题
一.保证编程工具的编码格式正常我用的IDEA,根据之前写的一篇博文(https://blog.csdn.net/qq_42152399/article/details/80995244),将IDEA ...
linux下c 上传图片到mysql_linux c做服务端使用多线程接收图片并且将图片写入数据库...
#include#include#include//包含文件的全部结构,属性 #include#include#include#include#include#include#include#incl ...
linux c做服务端使用多线程接收图片并且将图片写入数据库
#include<sys/socket.h> #include<sys/types.h> #include<sys/stat.h>//包含文件的全部结构,属性 #i ...
用python3根据配置自动生成自定义图片logo（一键解决图片侵权困扰）
欢迎关注原创视频教程 Python微信订餐小程序课程视频 https://edu.csdn.net/course/detail/36074 Python实战量化交易理财系统 https://edu.c ...
读取目录下的图片写入剪切板然后发送到qq窗口
平时为了奖励群友,把自己私藏的好康图片发给群友,但是一张一张发太过于麻烦,于是就想着写一个脚本.用C语言写的.具体涉及到读取文件夹下的文件,剪切板操作,跟键盘事件的相关操作,控制台窗口字体颜色修改.废 ...
使用宝塔面板快速搭建谷歌出品图片在线压缩工具 - Squoosh
使用宝塔面板快速搭建谷歌出品图片在线压缩工具 - Squoosh https://squoosh.app/ 这个网站应该很多人都知道,这是谷歌出品在线图片压缩工具,压缩效率给力的很,是我日常在线压缩博 ...
响铃：百度图腾要做正版授权平台，它能解决图片版权双向痛点吗？
文|曾响铃来源|科技向令说(xiangling0815) 继数字音乐.游戏.影视等版权问题后,图片版权问题近来成为版权领域的热门,与版权问题天然亲近的区块链免不了掺和一下,7月,百度就推出了基于区块 ...
opencv_python使用cv2.imread()读取中文路径，cv2.imwrite()把图片写入中文路径。
opencv_python使用cv2.imread()读取中文路径,cv2.imwrite()把图片写入中文路径定义函数: cv2_imread(path)代替cv2.imread() cv2_im ...

summernote 的快速使用，以及解决图片写入数据库问题

summernote 的快速使用，以及解决图片写入数据库问题相关推荐

最新文章

热门文章