前言
我们在使用QQ进行聊天时，从别的地方Ctrl+C一张图片，然后在聊天窗口Ctrl+V，QQ就会将你刚才复制的图片粘贴到即将发送的消息容器里，按下Enter键，这张图片将会发送出去。接下来跟各位开发者分享下这项功能在Vue中如何来实现。先跟大家展示下最终实现的效果。在线体验地址
实现思路
- 页面挂载时监听剪切板粘贴事件
- 监听文件流
- 读取文件流中的数据
- 创建img标签
- 将获取到的base64码赋值到img标签的src属性
- 将生成的img标签append到即将发送的消息容器里
- 监听回车事件
- 获取可编辑div容器中的所有子元素
- 遍历获取到的元素，找出img元素
- 判断当前img元素是否有alt属性（表情插入时有alt属性），
- 如果没有alt属性当前元素就是图片
- 将base64格式的图片转成文件上传至服务器
- 上传成功后，将服务器返回的图片地址推送到websocket服务
- 客户端收到推送后，渲染页面
实现过程
本片文章主要讲解剪切板图片的解析以及将base64图片转换成文件上传至服务器，下方代码中的axios的封装以及websocket的配置与使用可参考我的另外两篇文章：Vue合理配置axios并在项目中进行实际应用和Vue合理配置WebSocket并实现群聊
监听剪切板事件(mounted生命周期中)，将图片渲染到即将发送到消息容器里
const that = this;
document.body.addEventListener('paste', function (event) {
// 自己写的一个全屏加载插件，文章地址：https://juejin.im/post/5e3307145188252c30002fa7
that.$fullScreenLoading.show("读取图片中");
// 获取当前输入框内的文字
const oldText = that.$refs.msgInputContainer.textContent;
// 读取图片
let items = event.clipboardData && event.clipboardData.items;
let file = null;
if (items && items.length) {
// 检索剪切板items
for (let i = 0; i < items.length; i++) {
if (items[i].type.indexOf('image') !== -1) {
file = items[i].getAsFile();
break;
}
}
}
// 预览图片
const reader = new FileReader();
reader.onload = function(event) {
// 图片内容
const imgContent = event.target.result;
// 创建img标签
let img = document.createElement('img');//创建一个img
// 获取当前base64图片信息，计算当前图片宽高以及压缩比例
let imgObj = new Image();
let imgWidth = "";
let imgHeight = "";
let scale = 1;
imgObj.src = imgContent;
imgObj.onload = function() {
// 计算img宽高
if(this.width<400){
imgWidth = this.width;
imgHeight = this.height;
}else{
// 输入框图片显示缩小10倍
imgWidth = this.width/10;
imgHeight = this.height/10;
// 图片宽度大于1920，图片压缩5倍
if(this.width>1920){
// 真实比例缩小5倍
scale = 5;
}
}
// 设置可编辑div中图片宽高
img.width = imgWidth;
img.height = imgHeight;
// 压缩图片，渲染页面
that.compressPic(imgContent,scale,function (newBlob,newBase) {
// 删除可编辑div中的图片名称
that.$refs.msgInputContainer.textContent = oldText;
img.src = newBase; //设置链接
// 图片渲染
that.$refs.msgInputContainer.append(img);
that.$fullScreenLoading.hide();
});
};
};
reader.readAsDataURL(file);
});
base64图片压缩函数
// 参数: base64地址,压缩比例，回调函数(返回压缩后图片的blob和base64)
compressPic:function(base64, scale, callback){
const that = this;
let _img = new Image();
_img.src = base64;
_img.onload = function() {
let _canvas = document.createElement("canvas");
let w = this.width / scale;
let h = this.height / scale;
_canvas.setAttribute("width", w);
_canvas.setAttribute("height", h);
_canvas.getContext("2d").drawImage(this, 0, 0, w, h);
let base64 = _canvas.toDataURL("image/jpeg");
// 当canvas对象的原型中没有toBlob方法的时候，手动添加该方法
if (!HTMLCanvasElement.prototype.toBlob) {
Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
value: function (callback, type, quality) {
let binStr = atob(this.toDataURL(type, quality).split(',')[1]),
len = binStr.length,
arr = new Uint8Array(len);
for (let i = 0; i < len; i++) {
arr[i] = binStr.charCodeAt(i);
}
callback(new Blob([arr], {type: type || 'image/png'}));
}
});
}else{
_canvas.toBlob(function(blob) {
if(blob.size > 1024*1024){
that.compressPic(base64, scale, callback);
}else{
callback(blob, base64);
}
}, "image/jpeg");
}
}
}
完善消息发送函数，获取输入框里的所有子元素，找出base64图片将其转为文件并上传至服务器（此处需要注意：base64转文件时，需要用正则表达式删掉base64图片的前缀），将当前图片地址推送至websocket服务。
对下述代码有不理解的地方，可阅读我的另一篇文章：Vue实现图片与文字混输，
sendMessage: function (event) {
if (event.keyCode === 13) {
// 阻止编辑框默认生成div事件
event.preventDefault();
let msgText = "";
// 获取输入框下的所有子元素
let allNodes = event.target.childNodes;
for (let item of allNodes) {
// 判断当前元素是否为img元素
if (item.nodeName === "IMG") {
if (item.alt === "") {
// 是图片
let base64Img = item.src;
// 删除base64图片的前缀
base64Img = base64Img.replace(/^data:image\/\w+;base64,/, "");
//随机文件名
let fileName = (new Date()).getTime() + ".jpeg";
//将base64转换成file
let imgFile = this.convertBase64UrlToImgFile(base64Img, fileName, 'image/jpeg');
let formData = new FormData();
// 此处的file与后台取值时的属性一样,append时需要添加文件名，否则一直时blob
formData.append('file', imgFile, fileName);
// 将图片上传至服务器
this.$api.fileManageAPI.baseFileUpload(formData).then((res) => {
const msgImgName = `/${res.fileName}/`;
// 消息发送: 发送图片
this.$socket.sendObj({
msg: msgImgName,
code: 0,
username: this.$store.state.username,
avatarSrc: this.$store.state.profilePicture,
userID: this.$store.state.userID
});
// 清空输入框中的内容
event.target.innerHTML = "";
});
} else {
msgText += `/${item.alt}/`;
}
} else {
// 获取text节点的值
if (item.nodeValue !== null) {
msgText += item.nodeValue;
}
}
}
// 消息发送: 发送文字，为空则不发送
if (msgText.trim().length > 0) {
this.$socket.sendObj({
msg: msgText,
code: 0,
username: this.$store.state.username,
avatarSrc: this.$store.state.profilePicture,
userID: this.$store.state.userID
});
// 清空输入框中的内容
event.target.innerHTML = "";
}
}
}
base64图片转flie
// base64转file
convertBase64UrlToImgFile: function (urlData, fileName, fileType) {
// 转换为byte
let bytes = window.atob(urlData);
// 处理异常,将ascii码小于0的转换为大于0
let ab = new ArrayBuffer(bytes.length);
let ia = new Int8Array(ab);
for (let i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
// 转换成文件，添加文件的type，name，lastModifiedDate属性
let blob = new Blob([ab], {type: fileType});
blob.lastModifiedDate = new Date();
blob.name = fileName;
return blob;
}
axios文件上传接口的封装（注意：需要设置"Content-Type":"multipart/form-data"}）
/*
* 文件管理接口
* */
import services from '../plugins/axios'
import base from './base'; // 导入接口域名列表
const fileManageAPI = {
// 单文件上传
baseFileUpload(file){
return services._axios.post(`${base.lkBaseURL}/uploads/singleFileUpload`,file,{headers:{"Content-Type":"multipart/form-data"}});
}
};
export default fileManageAPI;
解析websocket推送的消息
// 消息解析
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解析剪切板图片并实现发送功能，希望对大家有所帮助！