一看就会，超有用活字格技能：一百八十三、富文本编辑器Base64图片转本地

收藏

本帖最后由 Simon.Sun 于 2024-6-12 14:38 编辑

一、说明

富文本编辑器的图片内容是以 Base64 编码的格式存储的，这样会导致富文本内容偏长，对数据存储造成压力。且相对于用静态图片从服务器访问图片的方式，Base64 编码也没办法使用浏览器自带的静态资源缓存，对网络数据传输也会有一定压力。
所以这里编写了服务端命令，在服务端命令里处理富文本内容，将 Base64 转成服务器本地图片进行存储，并用图片的网络路径替换原本 Base64 的内容，从而避免了存储的富文本内容过长。

二、实现

整体的服务端命令如下：

评论表新增：用于处理业务表数据的新增，调用 RichText 处理富文本内容，并将返回处理后的内容和图片附件进行新增；

评论表更新：用于处理业务表数据的更新，调用 RichText 处理富文本内容，并将返回处理后的内容和图片附件进行更新；

RichText（私有）：用于处理业务表中的富文本内容，将富文本内容汇总的 Base64 字符串替换成网络路径，并返回处理后的内容和处理后的图片附件路径；

Base64转本地图片（私有）：将 Base64 字符串转成服务器本地图片，并返回图片的网络路径和存储名称；

GetFileNameWithGuid（私有）：通过图片的网络路径获取带有 GUID 的文件名称；

CopyToTemp（私有）：拷贝文件，并重新生成 GUID 到 Temp 目录。

评论表新增

调用 RichText 处理富文本传递的内容，并且对处理后的内容和其他业务字段用数据表操作命令做新增。

评论表更新

调用 RichText 处理富文本传递的内容，并且对处理后的内容和其他业务字段用数据表操作命令做更新。

RichText

私有的服务端命令，实现了 Base64 转换文件和内容替换为 URL 相关逻辑。
使用正则匹配来匹配内容中的 Base64 字符串内容，并调用 Base64转本地图片来将 Base64 内容转换到服务器的本地图片，并将富文本内容里的 Base64 字符串替换成转换后图片的网络访问路径。

考虑到了在编辑富文本内容时可能会从其他已经编辑的富文本内容复制，所以增加了拷贝文件的逻辑。以保证，不同行数据使用自己的附件，避免数据行删除操作影响到了其他行富文本内容。

Base64转本地图片

私有服务端命令，用来处理 Base64 字符串，转换成本地图片，是将 Base64 转二进制图片的核心处理逻辑。按照活字格附件存储逻辑生成 GUID，拼接成附件名称（这里拼接的图片路径放置到了临时目录下，上游的服务端命令调用时，用数据表操作命令保存数据时，会自动将临时目录下的附件转移到正式目录）。然后将处理后附件的网络路径和图片附件名称返回。

PS：这里的获取 APP 根目录的URL命令默认获取的路径是服务器机器的名称，如果网络存在代理的情况下，这时候需要给应用配置下对外访问的域名。

GetFileNameWithGuid