富文本HTML编辑器中的图片如何保存存储？以quill.js为例

默认行为说明 #

Quill 作为纯前端编辑器，本身不提供任何后端存储能力，默认插入本地图片时会将图片转码为 Base64 字符串 直接内嵌到富文本内容中：

• 提交表单时，图片会作为 <img> 标签的 src 属性值，和其余富文本内容一起提交给你的后端接口
• 默认不会自动生成本地独立文件，也不会自动存储为数据库 BLOB 格式

常见的可选存储方案 #

你可以根据业务场景选择对应的存储方式：

• 直接存储内嵌 Base64 的完整富文本内容到数据库字段：无需额外开发图片上传逻辑，适合单图片尺寸小、图片数量少的场景。缺点是 Base64 会比原图片体积增加约 30%，富文本整体体积过大会导致加载、渲染速度变慢。
• 单独存储图片为独立文件，富文本仅存图片访问链接：这是业界最常用的方案，你需要自行实现 Quill 的图片上传拦截逻辑：用户选择本地图片后，先将图片上传到你的存储节点（服务器本地目录、私有存储集群等），拿到可访问的图片 URL 后再插入到编辑器中。该方案富文本体积小，加载速度快，适合绝大多数场景。
• 图片以 BLOB 格式存储到数据库：你需要自行将提交的 Base64 图片解码为二进制数据存入数据库 BLOB 字段，富文本中仅存储对应图片的关联 ID，前端渲染时单独请求接口获取 BLOB 数据转成图片展示。该方案仅适合对图片权限管控要求极高的场景，会额外增加数据库存储压力和接口请求压力，一般不推荐使用。

内容的提问来源于stack exchange，提问作者MeC