angular實現(xiàn)IM聊天圖片發(fā)送實例
IM聊天圖片發(fā)送有兩種方式
為同仁等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及同仁網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、外貿(mào)營銷網(wǎng)站建設(shè)、同仁網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！
- 截圖粘貼到信息框后點(diǎn)擊發(fā)送
- 選擇本地圖片發(fā)送
圖片剪切粘貼，使用QQ或者其他平臺的截圖功能，截圖后粘貼 Ctrl+V ，這個過程需要獲取粘貼板上的圖片數(shù)據(jù)，并在頁面中展示，也就是將圖片數(shù)據(jù)創(chuàng)建一個img元素，就可以顯示出來了。
從粘貼面板中獲取圖片數(shù)據(jù)
/**
* 黏貼發(fā)送圖片
* @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)
};
}
}
本地圖片選擇
<inputid="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);
}
將以上方法寫到一個 upload-file.servie.ts 中。然后其他地方就可以使用 uploadFileService.uploadPic() 方法調(diào)用了。
這里后端代碼忽略，后端Java或者nodejs都很簡單，接收文件二進(jìn)制流保存，或者是上傳到百度云與阿里云。
信息發(fā)送按鈕處理
發(fā)送信息處理，需要處理好文本信息和圖片信息兩種。
/**
* 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});
}
/**
* 發(fā)送消息
* @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);
}
}
//調(diào)用上傳圖片方法
this.uploadFileService.uploadPic(formData).then(result=>{
//上傳成功，do something
console.log(result);
}).catch(err=>{
console.log('圖片上傳失敗'+err);
})
}else{
//非圖片信息，文本發(fā)送
//this.submitMessage(value);
}
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
分享題目：angular實現(xiàn)IM聊天圖片發(fā)送實例
文章分享：http://www.chinadenli.net/article8/jdhpop.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、搜索引擎優(yōu)化、定制網(wǎng)站、軟件開發(fā)、建站公司、商城網(wǎng)站
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)
