未分类

angular实现IM聊天图片发送实例_AngularJS_脚本之家

19 3月 , 2020  

/** * dataURL to blob, ref to https://gist.github.com/fupslot/5015897 * @param dataURI * @returns {Blob} */functiondataURItoBlob{ var byteString = atob[1]); var mimeString = dataURI.split[1].split[0]; var ab = new ArrayBuffer; var ia = new Uint8Array; for (var i = 0; i < byteString.length; i++) { ia[i] = byteString.charCodeAt; } return new Blob([ab], {type: mimeString});}/** * 发送消息 * @param taskValue */ sendMessage() { let dateTime = this.dateFromat.FormatDate; let value = $.html(); let isImg = value.includes; //如果是图片信息 if  { let formData = new FormData(); let dataURL=""; let src=$[0].src; //图片截图粘贴 if(src.includes{ dataURL=src; let blob = dataURItoBlob; formData.append; //图片本地选择 }else if(src.includes{ //files是图片选择时保存的图片文件对象,见onFileSelect方法 for(let i = 0; i < this.files.length; i++) { formData.append('file', this.files[i], this.files[i].name); } } //调用上传图片方法 this.uploadFileService.uploadPic.then(result=>{ //上传成功,do something console.log.catch(err=>{ console.log }else{ //非图片信息,文本发送 //this.submitMessage; } }

前端angular上传图片到服务器,必然是ajax请求的方式,将图片数据转成二进制流传给后端了。

/** * 选择图片 * @param event */files:any[]=[];onFileSelect { 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  { file.objectURL = this.sanitizer.bypassSecurityTrustUrl((window.URL.createObjectURL; this.files.push; } } let fileUrl = file.objectURL.changingThisBreaksApplicationSecurity; let img = new Image(); img.src = fileUrl; img.className = 'chatImg'; $.append;}

发送信息处理,需要处理好文本信息和图片信息两种。

信息发送按钮处理

图片剪切粘贴,使用QQ或者其他平台的截图功能,截图后粘贴 Ctrl+V
,这个过程需要获取粘贴板上的图片数据,并在页面中展示,也就是将图片数据创建一个img元素,就可以显示出来了。

图片上传服务器

从粘贴面板中获取图片数据

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

本地图片选择

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

这里后端代码忽略,后端Java或者nodejs都很简单,接收文件二进制流保存,或者是上传到百度云与阿里云。

/** * 黏贴发送图片 * @param e */pasteData { e.preventDefault(); let clipboardData = e.clipboardData; if  { //如果支持这个 let items = clipboardData.items; //获取黏贴里的对象 if  { return; } let item; let types = clipboardData.types || []; for (let i = 0, len = types.length; i< len; i++) { if  { item = items[i]; break; } } if (item && item.kind === 'file' && item.type.match { imgReader; } } functionimgReader{ let $messageBox=$; let file = obj.getAsFile(), reader = new FileReader(); // 读取文件 reader.readAsDataURL; reader.onload = function{ let img = new Image(); img.src = e.target['result']; img.className = 'chatImg'; $messageBox.append=> { $messageBox.scrollTop($messageBox[0].scrollHeight); }, 0) }; }}
url:string="http://localhost:8080/upload";progress:number=0;//进度uploadPic:Promise { let xhr = new XMLHttpRequest(), //封装xhr请求 return new Pormise{ xhr.upload.addEventListener('progress',  => { if { this.progress = Math.round / e.total); } }, false); xhr.onreadystatechange = ()=> { if { 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; xhr.send; } }

将以上方法写到一个 upload-file.servie.ts 中。然后其他地方就可以使用
uploadFileService.uploadPic() 方法调用了。

angular实现IM聊天图片发送实例_AngularJS_脚本之家。截图粘贴到信息框后点击发送 选择本地图片发送


相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图