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

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);
    }

  }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。