我们在使用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"); } } }