Vue解析剪切板图片并实现发送功能-创新互联

前言

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

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。