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