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 相关文章推荐
基于Jquery实现表格动态分页实现代码
Jun 21 Javascript
js 遍历对象的属性的代码
Dec 29 Javascript
javascript禁止超链接跳转的方法
Feb 02 Javascript
JS实现环形进度条(从0到100%)效果
Jul 05 Javascript
详解Js模板引擎(TrimPath)
Nov 22 Javascript
教大家轻松制作Bootstrap漂亮表格(table)
Dec 13 Javascript
JavaScript获取当前时间向前推三个月的方法示例
Feb 04 Javascript
weui框架实现上传、预览和删除图片功能代码
Aug 24 Javascript
在Swiper内如何制作CSS3动画效果示例代码
Dec 07 Javascript
Puppeteer环境搭建的详细步骤
Sep 21 Javascript
Vue-cli4 配置 element-ui 按需引入操作
Sep 11 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 Vue.js
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中flush()、ob_flush()、ob_end_flush()的区别介绍
2013/02/17 PHP
Yii框架中jquery表单验证插件用法示例
2016/10/18 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
PHP实现链表的定义与反转功能示例
2018/06/09 PHP
Prototype1.5 rc2版指南最后一篇之Position
2007/01/10 Javascript
javaScript 数值型和字符串型之间的转换
2009/07/25 Javascript
网页实时显示服务器时间和javscript自运行时钟
2014/06/09 Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
2015/05/08 Javascript
javascript+canvas实现刮刮卡抽奖效果
2015/07/29 Javascript
Ionic如何创建APP项目
2016/06/03 Javascript
基于js对象,操作属性、方法详解
2016/08/11 Javascript
js注入 黑客之路必备!
2016/09/14 Javascript
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
2017/03/10 Javascript
深究AngularJS之ui-router详解
2017/06/13 Javascript
JavaScript反弹动画效果的实现代码
2017/07/13 Javascript
Vue2 配置 Axios api 接口调用文件的方法
2017/11/13 Javascript
layui框架中layer父子页面交互的方法分析
2017/11/15 Javascript
JS+HTML+CSS实现轮播效果
2017/11/28 Javascript
vue移动端实现下拉刷新
2018/04/22 Javascript
解决pycharm双击但是无法打开的情况
2020/10/31 Javascript
python的id()函数解密过程
2012/12/25 Python
python模拟登录百度贴吧(百度贴吧登录)实例
2013/12/18 Python
Python连接mysql数据库的正确姿势
2016/02/03 Python
Python中将字典转换为列表的方法
2016/09/21 Python
python解决pandas处理缺失值为空字符串的问题
2018/04/08 Python
python梯度下降法的简单示例
2018/08/31 Python
Python使用gluon/mxnet模块实现的mnist手写数字识别功能完整示例
2019/12/18 Python
如何在windows下安装Pycham2020软件(方法步骤详解)
2020/05/03 Python
优秀毕业大学生推荐信
2013/11/13 职场文书
农林环境专业求职信
2014/03/13 职场文书
自我鉴定总结
2014/03/24 职场文书
建筑安全标语
2014/06/07 职场文书
机关班子查摆问题及整改措施
2014/10/28 职场文书
男人帮观后感
2015/06/18 职场文书
MyBatis-Plus 批量插入数据的操作方法
2021/09/25 Java/Android
MySQL中int (10) 和 int (11) 的区别
2022/01/22 MySQL