如何将v-emoji-picker选中的表情和文本一同存入数据库并正常回显

问题根本原因 #

常用关系型数据库（如MySQL、MariaDB）默认的utf8编码仅支持最多3字节的Unicode字符，而emoji属于4字节的Unicode字符，直接写入会被截断或报错。你可以根据自身场景选择以下两种解决方案：

方案一：直接存储emoji原生字符（实现最简单，推荐优先使用） #

无需修改前端代码，仅调整后端和数据库配置即可：

• 修改对应数据库、数据表、存储内容的字段字符集为utf8mb4，排序规则可选用utf8mb4_unicode_ci，参考SQL：

ALTER TABLE 你的表名 MODIFY COLUMN 存储内容的字段名 TEXT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

• 调整后端服务的数据库连接配置，指定编码为utf8mb4。比如Java的JDBC连接需添加参数useUnicode=true&characterEncoding=utf8mb4，Node.js的mysql连接库需在配置项中指定charset: 'utf8mb4'。

配置完成后直接提交原生emoji即可正常存储，前端读取后也可以直接渲染展示。

方案二：存储表情别名（兼容不支持utf8mb4的旧数据库环境） #

v-emoji-picker返回的emoji对象自带别名属性（即调试时可看到的emoji.name，格式为:smile:这类标识），你可以通过前后端配合实现别名和emoji的互转：

1. 前端提交前将内容中的emoji转换为别名存储
2. 前端读取内容时将别名转换回emoji渲染
   参考修改后的代码逻辑：

import { VEmojiPicker, emojisDefault, categoriesDefault } from "v-emoji-picker";
import axios from 'axios'
export default {
  name: "exampleInputEmoji",
  components: {
    VEmojiPicker
  },
  data: () => ({
    valueInput: "Someting text ",
    showDialog: false,
    // 新增emoji和别名的映射表
    emojiToAliasMap: new Map(emojisDefault.map(item => [item.data, item.name])),
    aliasToEmojiMap: new Map(emojisDefault.map(item => [item.name, item.data]))
  }),
  mounted() {
    console.log(categoriesDefault);
    console.log("Total emojis:", emojisDefault.length);
  },
  methods: {
    toogleDialogEmoji() {
      console.log("Toogle!");
      this.showDialog = !this.showDialog;
    },
    onSelectEmoji(emoji) {
        console.log('secilenEmoji',emoji)
      this.valueInput += emoji.data;
    },
    // 新增：内容转别名
    transformToAlias(content) {
      return content.replace(/\p{Emoji}/gu, match => this.emojiToAliasMap.get(match) || match)
    },
    // 新增：别名转emoji
    transformToEmoji(content) {
      return content.replace(/:[a-zA-Z0-9_]+:/g, match => this.aliasToEmojiMap.get(match) || match)
    },
    save(){
      // 提交前先转换为别名
      const submitBody = this.transformToAlias(this.valueInput)
      axios
      .post(`http://127.0.0.1:8086/notification`, {
          body: submitBody
      })
      .then((response) => response.data);
    },
    // 页面加载时调用，拉取存储的内容后转换为带emoji的文本
    async loadContent() {
      const res = await axios.get('你的查询接口地址')
      this.valueInput = this.transformToEmoji(res.data.body)
    }
  }
};

内容的提问来源于stack exchange，提问作者Ömür Özbek