angular实现IM聊天图片发送

Posted giscafer

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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);            }        }
       function imgReader(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)            };        }    }

本地图片选择

 <input id="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} */function dataURItoBlob(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);
        }

    }

<完>

点击阅读原文博客阅读代码排版体验更佳

相关阅读


以上是关于angular实现IM聊天图片发送的主要内容,如果未能解决你的问题,请参考以下文章

IM聊天教程:发送图片/视频/语音/表情

IM聊天系统

向 Google IM 用户发送聊天

基于融云的IM通讯

websocket IM 聊天教程-教你用 GoEasy 快速实现 IM 聊天

目标:创建一个体面的在线 IM 聊天