IM聊天图片发送有两种方式
- 截图粘贴到信息框后点击发送
- 选择本地图片发送
图片剪切粘贴，使用QQ或者其他平台的截图功能，截图后粘贴 Ctrl+V ，这个过程需要获取粘贴板上的图片数据，并在页面中展示，也就是将图片数据创建一个img元素，就可以显示出来了。
从粘贴面板中获取图片数据
$messageBox.append(img);
setTimeout(()=> {
$message<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>.scrollTop($message<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>[0].scrollHeight);
},0)
};}
}
本地图片选择
$('#message-BoxID').append(img);
}
图片上传服务器
前端angular上传图片到服务器，必然是ajax请求的方式，将图片数据转成二进制流传给后端了。
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后端验证，设置请求<a href="https://www.jb51.cc/tag/toubuxinxi/" target="_blank" class="keywords">头部信息</a>，<a href="https://www.jb51.cc/tag/jiejue/" target="_blank" class="keywords">解决</a>跨域
xhr.setRequestHeader("Authorization","Basic " + localStorage.getItem('jwt'));
xhr.send(formData);}
}
将以上方法写到一个 upload-file.servie.ts 中。然后其他地方就可以使用 uploadFileService.uploadPic() 方法调用了。
这里后端代码忽略，后端Java或者nodejs都很简单，接收文件二进制流保存，或者是上传到百度云与阿里云。
信息发送按钮处理
发送信息处理，需要处理好文本信息和图片信息两种。
/**
-
发送消息
-
@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);
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
原文地址：https://www.jb51.cc/js/39452.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
