summernote中关于上传图片的问题（解决）

最新推荐文章于 2025-06-26 12:28:30 发布

原创

最新推荐文章于 2025-06-26 12:28:30 发布 · 7k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#summernote #富文本编辑器

在重构数据结构平台时，使用summernote富文本编辑器遇到了图片上传转化为base64导致数据库负担过大的问题。通过研究官方文档和GitHub issue，发现回调函数`onImageUpload`未被正确调用。最终在GitHub上找到了解决方案，即不使用callbacks中的onImageUpload，解决了图片上传到服务器的难题。同时，注意到插入图片的URL需为HTTP形式的服务器路径，以便在编辑器中正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景

最近在写学校的数据结构平台重构，有一块地方要用到summernote编辑器，而且编辑框里面是要插入图片的，summernote默认插入图片后会转为base64数据，存到数据库的话对数据库负担很大，试过直接存图片，普通的text字段顶多存两张图片，因为text字段长度是64kb，而且学长给我的需求是把编辑框里的图片存到服务器。

过程

第一次接触summernote嘛当然是去百度搜索怎么玩了，网上的各种博客都说summernote在编辑框里上传图片的话都需要用到回调函数callbacks中的onImageUpload。类似于：

$("#context").summernote({
        height: 200,
        minHeight: 200,
        maxHeight: 200,
        lang: 'zh-CN',
		callbacks: {
	    		    onImageUpload: function (files) {
	            		 uploadFile($summernote, files[0]);
	        		}
	   		 }
    });

我仿照写了一下，确发现无论是粘贴图片进去还是用自带的图片按钮上传进去，都进入不到这个回调函数里面，而后又去官方文档里查，官方文档（https://summernote.org/deep-dive/）里也是这么个写法，搞不懂为什么，各种尝试也做过了，最后无意间在github（https://github.com/summernote/summernote/issues/72）里看到了另一种