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

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

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

图片剪切粘贴，使用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);   } }