Today, there is a problem in the test feedback, that is, the comments with emoticons are uploaded and reported wrongly. It is obvious that there is no relevant processing for emoticons in the background. Let them handle it. What kind of trouble do they say? Forget it. The front end should handle it by itself!

The specific reason is: UTF-8 encoding may be two, three, four bytes. Emoji expression is 4 bytes, and Mysql utf8 encoding is up to 3 bytes, so the data cannot be inserted.

The plan:

1. You can first convert emoticons to strings, upload them to the server with strings, and then convert the strings to emoticons when displaying them.
2. The front end prevents users from entering emoticons. The experience is not good.

Plan 1.
Emoticon to character:

function EmojiExchangeString(str) { 
    var patt=/[\ud800-\udbff][\udc00-\udfff]/g; // Detect utf16 character regularity 
    str = str.replace(patt, function(char){ 
        var H, L, code; 
        if (char.length===2) { 
            H = char.charCodeAt(0); // Remove high position 
            L = char.charCodeAt(1); // Remove low position 
            code = (H - 0xD800) * 0x400 + 0x10000 + L - 0xDC00; // Transformation algorithm 
            return "&#" + code + ";"; 
        } else { 
            return char; 
        } 
    }); 
    return str; 
}

Character to emoticon:

function StringExchangeEmoji(str){
    var reg = /\&#.*?;/g;
    var result = str.replace(reg,function(char){
        var H,L,code;
        if(char.length == 9 ){
            code = parseInt(char.match(/[0-9]+/g));
            H = Math.floor((code-0x10000) / 0x400)+0xD800;
            L = (code - 0x10000) % 0x400 + 0xDC00;
            return unescape("%u"+H.toString(16)+"%u"+L.toString(16));
        }else{
            return char;
        }
    });
    return result;
}

Option two.

 <textarea v-bind:maxlength="Surplus" @input="descArea" v-model="inputText" name="abstract" id="abstract" placeholder="Does baby meet your expectations? Talk about your experience and share it with those who want to buy it!"></textarea>

//Method
descArea () {
   var regStr = /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/ig;
      this.inputText  = this.inputText.replace(regStr,"")
}