富文本中的图片是base64的，导致提交数据很大，接口响应很慢

富文本中的图片是base64的，导致提交数据很大，接口响应很慢

富文本编辑器 图片base64太长问题

前端开发人员在遇到富文本编辑器的时候，经常会被测试 或者产品提各种需求优化或者一些体验的bug ;

比如：

• 测试会提出富文本的内容过长，限制内容，限制输入等等类似的问题： 其实为什么是富文本，就是要写文章用的，这个用户行为，是不建议给限制的。 那么测试会提 内容太长，限制字数的问题，不用想，限制不了的，字数是不准确的，包括了html标签，特殊符号等等,或者会说可以使用获取text content 等各个富文本组件对应的api。但是这个只是限制了text 或者content的长度，无法限制html string 的总长度的。
  —> 所以直白的结论是，这个限制富文本长度，富文本限制输入的问题，90% 不是问题，就是这样的，不用解决！或者限制一个极限最大长度，但这个对文章长度限制，几乎很微弱，不如让接口直接自己做长度安全限制。
• 富文本中，图片的复制粘贴的时候，图片会自动转为 base64格式的。加载在提交的html字符串中，一般来说，图片大小，转为base64之后的字符长度对应的数据大小比例为 pic/base64 ~= 1/1.3 或者可能会更大。一个500kb的图片，转换之后，大概650kb靠上，而且富文本提交时候，这是直接提交到接口上的，这个对项目接口的影响太大了，正常一个接口才上传一些json数据，这个就要上传几百kb,1Mb靠上等等。
  —> 这样不行的，目前本人的好的解决办法有两个:

  • 1.使用 html-base64-img-to-upload,在富文本数据提交接口的时候，识别字符串中的含有base64图片的标签，上传到目标oss云服务，或者自己的资源服务器，然后用上传后的地址替换到字符串中

  • 2.使用一些富文本编辑器的扩展插件，比如vue @vueup/vue-quill 编辑器中的扩展插件 quill-image-upload-v2,基本可以解决该问题，适当有一些小问题，影响不是很大。