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)
};
}
}
本地图片选择
/**
* 选择图片
* @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{ 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}
*/
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('{
//上传成功，do something
console.log(result);
}).catch(err=>{
console.log('图片上传失败'+err);
})
}else{
//非图片信息，文本发送
//this.submitMessage(value);
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。