angular实现IM聊天图片发送实例

angular实现IM聊天图片发送实例

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

截图粘贴到信息框后点击发送

选择本地图片发送

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

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

/**

* 黏贴发送图片

* @param e

*/

pasteData(e) {

e.preventDefault();

let clipboardData = e.clipboardData;

if (clipboardData) { //如果支持这个

let items = clipboardData.items; //获取黏http://贴里的对象

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 imVlSSrag = 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.VlSSraprogress = 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都很简单，接收文件二进制流保存，或者是上传到百度云与阿里云。

信息发送按钮处理

发送信息处理，需要处理好文本信息和图片信息两http://种。

/**

* 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('

//如果是图片信息

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);

}

}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。