mysql数据库保存表情emoji失败，修改字符集utfmb4也无效

前言

使用富文本编辑提交包含表情（emoji）的 html 字符串时，无法保存到 mysql 数据库

提交 html 字符串数据如下

出现如下报错

Incorrect string value: '\\xF0\\x9F\\x98\\x801' for column 'preview' at row 1

解决

使用js原生提供的 window.btoa 和 window.atob 方法进行 Base64 转码。

表情是中文字符的还需配合 encodeURI 和 decodeURI 进行转码，再进行 Base64 转码。

// 提交时转码
const encode = window.btoa(encodeURI('<p>1😀1</p>'));

// html渲染时解码
const decode = decodeURI(window.atob('<p>1😀1</p>'));

效果图

使用 Base64 转码后的提交数据

Base64 解码后的页面显示效果

如果本篇文章对你有帮助的话，很高兴能够帮助上你。

当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。