angular实现IM聊天图片发送实例


Posted in Javascript onMay 08, 2017

IM聊天图片发送有两种方式

  1. 截图粘贴到信息框后点击发送
  2. 选择本地图片发送

图片剪切粘贴,使用QQ或者其他平台的截图功能,截图后粘贴 Ctrl+V ,这个过程需要获取粘贴板上的图片数据,并在页面中展示,也就是将图片数据创建一个img元素,就可以显示出来了。

从粘贴面板中获取图片数据

/**
 * 黏贴发送图片
 * @param e
 */
pasteData(e) {
  e.preventDefault();
  let clipboardData = e.clipboardData;
  if (clipboardData) { //如果支持这个
    let items = clipboardData.items; //获取黏贴里的对象
    if (!items) {
      return;
    }
    let item;
    let types = clipboardData.types || [];
    for (let i = 0, len = types.length; i< len; i++) {
      if (types[i] === 'Files') {
        item = items[i];
        break;
      }
    }
    if (item && item.kind === 'file' && item.type.match(/^image\//i)) {
      imgReader(item);
    }
  }
  functionimgReader(obj){
   let $messageBox=$('#message-boxID');
    let file = obj.getAsFile(),
      reader = new FileReader();
    // 读取文件
    reader.readAsDataURL(file);
    reader.onload = function(e){
      let img = new Image();
      img.src = e.target['result'];
      img.className = 'chatImg';

      $messageBox.append(img);
      setTimeout(()=> {
        $messageBox.scrollTop($messageBox[0].scrollHeight);
      }, 0)
    };
  }
}

本地图片选择

<inputid="upImg"name="fileTrans"type="file"(change)="onFileSelect($event)"/>
/**
 * 选择图片
 * @param event
 */
files:any[]=[];
onFileSelect(event) {
  this.files=[];
  let files = event.dataTransfer ? event.dataTransfer.files : event.target.files;
  let file;
  for (let i = 0; i < files.length; i++) {
    file = files[i];
    if (this.isImage(file)) {
      file.objectURL = this.sanitizer.bypassSecurityTrustUrl((window.URL.createObjectURL(files[i])));
      this.files.push(files[i]);
    }
  }
  let fileUrl = file.objectURL.changingThisBreaksApplicationSecurity;
  let img = new Image();
  img.src = fileUrl;
  img.className = 'chatImg';

  $('#message-boxID').append(img);
}

图片上传服务器

前端angular上传图片到服务器,必然是ajax请求的方式,将图片数据转成二进制流传给后端了。

url:string="http://localhost:8080/upload";
progress:number=0;//进度

uploadPic(formData):Promise<any> {
   let xhr = new XMLHttpRequest(),
   
   
   //封装xhr请求
   return new Pormise(resolve,reject){
     xhr.upload.addEventListener('progress', (e: ProgressEvent) => {
     if(e.lengthComputable) {
      this.progress = Math.round((e.loaded * 100) / e.total);
     }
     }, false);

     xhr.onreadystatechange = ()=> {
       if(xhr.readyState == 4) {
         this.progress = 0;
         
         if(xhr.status >= 200 && xhr.status < 300)
           resolve({xhr: xhr, files: this.files});
         else
           reject({xhr: xhr, files: this.files});
       }
     };
     
     xhr.open('POST', this.url, true);
     //jwt后端验证,设置请求头部信息,解决跨域
     xhr.setRequestHeader("Authorization", "Basic " + localStorage.getItem('jwt'));
     
     xhr.send(formData);
   }
 }

将以上方法写到一个 upload-file.servie.ts 中。然后其他地方就可以使用 uploadFileService.uploadPic() 方法调用了。

这里后端代码忽略,后端Java或者nodejs都很简单,接收文件二进制流保存,或者是上传到百度云与阿里云。

信息发送按钮处理

发送信息处理,需要处理好文本信息和图片信息两种。

/**
 * dataURL to blob, ref to https://gist.github.com/fupslot/5015897
 * @param dataURI
 * @returns {Blob}
 */
functiondataURItoBlob(dataURI){
  var byteString = atob(dataURI.split(',')[1]);
  var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
  var ab = new ArrayBuffer(byteString.length);
  var ia = new Uint8Array(ab);
  for (var i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
  }
  return new Blob([ab], {type: mimeString});
}

/**
   * 发送消息
   * @param taskValue
   */
  sendMessage() {
    let dateTime = this.dateFromat.FormatDate(new Date());
    let value = $('#message-boxID').html();
    let isImg = value.includes('<img');
    //如果是图片信息
    if (isImg) {
      let formData = new FormData();
      let dataURL="";
      let src=$(value)[0].src;
      //图片截图粘贴
      if(src.includes('data:images')){
        dataURL=src;
        let blob = dataURItoBlob(dataURL);
        formData.append('file', blob);
      
      //图片本地选择
      }else if(src.includes('blob:http')){
         //files是图片选择时保存的图片文件对象,见onFileSelect方法
        for(let i = 0; i < this.files.length; i++) {
          formData.append('file', this.files[i], this.files[i].name);
        }
      }
      //调用上传图片方法
      this.uploadFileService.uploadPic(formData).then(result=>{
        //上传成功,do something
        console.log(result);
        
      }).catch(err=>{
        console.log('图片上传失败'+err);
      })
    }else{
      //非图片信息,文本发送
      //this.submitMessage(value);
    }

  }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ie focus bug 解决方法
Sep 03 Javascript
ajax 缓存 问题 requestheader
Aug 01 Javascript
jquery怎样实现ajax联动框(二)
Mar 08 Javascript
JavaScript实现复制功能各浏览器支持情况实测
Jul 18 Javascript
js中opener与parent的区别详细解析
Jan 14 Javascript
用JavaScript实现页面重定向功能的教程
Jun 04 Javascript
使用微信小程序开发前端【快速入门】
Dec 05 Javascript
javascript数组去重方法分析
Dec 15 Javascript
js实现自定义路由
Feb 04 Javascript
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
Oct 20 Javascript
还不懂递归?读完这篇文章保证你会懂
Jul 29 Javascript
解决vue打包 npm run build-test突然不动了的问题
Nov 13 Javascript
Angular.Js中过滤器filter与自定义过滤器filter实例详解
May 08 #Javascript
canvas简单快速的实现知乎登录页背景效果
May 08 #Javascript
详解JavaScript中return的用法
May 08 #Javascript
如何使用angularJs
May 08 #Javascript
关于foreach循环中遇到的问题小结
May 08 #Javascript
js下载文件并修改文件名
May 08 #Javascript
JS将unicode码转中文方法
May 08 #Javascript
You might like
深入理解PHP原理之Session Gc的一个小概率Notice
2011/04/12 PHP
php根据isbn书号查询amazon网站上的图书信息的示例
2014/02/13 PHP
php一行代码获取文件后缀名实例分析
2014/11/12 PHP
Yii中表单用法实例详解
2016/01/05 PHP
php+redis实现注册、删除、编辑、分页、登录、关注等功能示例
2017/02/15 PHP
不同浏览器对回车提交表单的处理办法
2010/02/13 Javascript
JavaScript 高效运行代码分析
2010/03/18 Javascript
JavaScript面向对象程序设计三 原型模式(上)
2011/12/21 Javascript
extjs 04_grid 单击事件新发现
2012/11/27 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
2013/03/25 Javascript
fckeditor粘贴Word时弹出窗口取消的方法
2014/10/30 Javascript
高性能JavaScript DOM编程(1)
2015/08/11 Javascript
node网页分段渲染详解
2016/09/05 Javascript
AngularJS中transclude用法详解
2016/11/03 Javascript
setTimeout学习小结
2017/02/08 Javascript
js实现常见的工具条效果
2017/03/02 Javascript
微信小程序 支付功能实现PHP实例详解
2017/05/12 Javascript
Node.JS循环删除非空文件夹及子目录下的所有文件
2018/03/12 Javascript
angular8和ngrx8结合使用的步骤介绍
2019/12/01 Javascript
javascript 模块依赖管理的本质深入详解
2020/04/30 Javascript
JavaScript array常用方法代码实例详解
2020/09/02 Javascript
python输出指定月份日历的方法
2015/04/23 Python
python3 selenium 切换窗口的几种方法小结
2018/05/21 Python
使用Python制作自动推送微信消息提醒的备忘录功能
2018/09/06 Python
Python文件打开方式实例详解【a、a+、r+、w+区别】
2019/03/30 Python
Python Threading 线程/互斥锁/死锁/GIL锁
2019/07/21 Python
python中property和setter装饰器用法
2019/12/19 Python
香港迪士尼乐园酒店预订:Hong Kong Disneyland Hotels
2017/05/02 全球购物
严选全球尖货,立足香港:Bonpont宝盆
2018/07/24 全球购物
strlen的几种不同实现方法
2013/05/31 面试题
聚美优品广告词改编
2014/03/14 职场文书
担保书格式及范文
2014/04/01 职场文书
乡镇2014法制宣传日活动总结
2014/11/01 职场文书
优秀班干部主要事迹材料
2015/11/04 职场文书
导游词之河北白洋淀
2020/01/15 职场文书
numpy数据类型dtype转换实现
2021/04/24 Python