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聊天图片发送的主要内容,如果未能解决你的问题,请参考以下文章