angular實現IM聊天圖片發(fā)送實例

更新時間：2017年05月08日 09:36:34 作者：Giscafer''s

本篇文章主要介紹了angular實現IM聊天圖片發(fā)送實例，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

IM聊天圖片發(fā)送有兩種方式

截圖粘貼到信息框后點擊發(fā)送
選擇本地圖片發(fā)送

圖片剪切粘貼，使用QQ或者其他平臺的截圖功能，截圖后粘貼 Ctrl+V ，這個過程需要獲取粘貼板上的圖片數據，并在頁面中展示，也就是將圖片數據創(chuàng)建一個img元素，就可以顯示出來了。

從粘貼面板中獲取圖片數據

/**
 * 黏貼發(fā)送圖片
 * @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都很簡單，接收文件二進制流保存，或者是上傳到百度云與阿里云。

信息發(fā)送按鈕處理

發(fā)送信息處理，需要處理好文本信息和圖片信息兩種。

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

/**
   * 發(fā)送消息
   * @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{
      //非圖片信息，文本發(fā)送
      //this.submitMessage(value);
    }

  }

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: