这个过程需要获取粘贴板上的图片数据

作者:官方彩票手机投注网站-服务器运维

IM谈心图片发送有三种情势

截图粘贴到消息框后点击发送 选取本地图片发送

图形剪切粘贴,使用QQ或然别的平台的截图成效,截图后粘贴 Ctrl+V ,这些历程必要获得粘贴板上的图片数据,并在页面中展现,约等于将图纸数据创制八个img元素,就足以体现出来了。

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

/** * 黏贴发送图片 * @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) }; }}

地方图片选拔

/** * 选择图片 * @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;}

图形上传服务器

前端angular上传图片到服务器,必然是ajax伏乞的不二等秘书技,将图纸数据转成二进制流传给后端了。

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(卡塔尔国 方法调用了。

此间后端代码忽视,后端Java或然nodejs都很简短,选取文件二进制流保存,或许是上传到百度云与Ali云。

新闻发送开关管理

发送音讯管理,需求管理好文件新闻和图表消息三种。

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

上述就是本文的全部内容,希望对大家的求学抱有利于,也盼望大家多都赐教脚本之家。

本文由彩票投注软件发布,转载请注明来源

关键词: