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

위의 방법 을 upload-file.servie.ts 에 기록 합 니 다.그리고 다른 곳 에 서 는 uploadFileService.uploadPic()방법 으로 호출 할 수 있 습 니 다.
이 백 엔 드 코드 는 무시 합 니 다.백 엔 드 자바 나 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);
    }

  }

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.