Vue解析剪切板图片并实现发送功能

// 消息解析
messageParsing: function (msgObj) {
// 解析接口返回的数据并进行渲染
let separateReg = /(/[^/]+/)/g;
let msgText = msgObj.msgText;
let finalMsgText = "";
// 将符合条件的字符串放到数组里
const resultArray = msgText.match(separateReg);
if (resultArray !== null) {
for (let item of resultArray) {
// 删除字符串中的/符号
item = item.replace(///g, "");
// 判断是否为图片: 后缀为.jpeg
if(this.isImg(item)){
// 解析为img标签
const imgTag = `<img src="${base.lkBaseURL}/upload/image/${item}" alt="聊天图片">`;
// 替换匹配的字符串为img标签:全局替换
msgText = msgText.replace(new RegExp(`/${item}/`, 'g'), imgTag);
}
}
finalMsgText = msgText;
} else {
finalMsgText = msgText;
}
msgObj.msgText = finalMsgText;
// 渲染页面
this.senderMessageList.push(msgObj);
// 修改滚动条位置
this.$nextTick(function () {
this.$refs.messagesContainer.scrollTop = this.$refs.messagesContainer.scrollHeight;
});
}

判断当前字符串是否为有图片后缀

// 判断是否为图片
isImg: function (str) {
 let objReg = new RegExp("[.]+(jpg|jpeg|swf|gif)$", "gi");
 return objReg.test(str);
}

踩坑记录

直接将base64格式的图片通过websocket发送至服务端

结果很明显，服务端websocket服务报错，报错原因：内容超过最大长度。

前端通过post请求将base64码传到服务端，服务端直接将base64码解析为图片保存至服务器

从下午2点折腾到晚上6点，一直在找Java解析base64图片存到服务器的方案，最终选择了放弃，采用了前端转换方式，这里的问题大概是前端传base64码到后端时，http请求会进行转义，导致后端解析得到的base64码是错误的，所以一直没有成功。

项目地址：chat-system

总结

以上所述是小编给大家介绍的Vue解析剪切板图片并实现发送功能，希望对大家有所帮助！