IM聊天圖片發(fā)送有兩種方式
為同仁等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計(jì)制作服務(wù)，及同仁網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)、同仁網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！
圖片剪切粘貼，使用QQ或者其他平臺(tái)的截圖功能，截圖后粘貼 Ctrl+V ，這個(gè)過程需要獲取粘貼板上的圖片數(shù)據(jù)，并在頁面中展示，也就是將圖片數(shù)據(jù)創(chuàng)建一個(gè)img元素，就可以顯示出來了。
從粘貼面板中獲取圖片數(shù)據(jù)
重慶分公司
重慶分公司
/**
* 黏貼發(fā)送圖片
* @param e
*/
pasteData(e) {
e.preventDefault();
let clipboardData = e.clipboardData;
if (clipboardData) { //如果支持這個(gè)
let items = clipboardData.items; //獲取黏貼里的對(duì)象
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);
}
將以上方法寫到一個(gè) upload-file.servie.ts 中。然后其他地方就可以使用 uploadFileService.uploadPic() 方法調(diào)用了。
這里后端代碼忽略，后端Java或者nodejs都很簡(jiǎn)單，接收文件二進(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('{
//上傳成功，do something
console.log(result);
}).catch(err=>{
console.log('圖片上傳失敗'+err);
})
}else{
//非圖片信息，文本發(fā)送
//this.submitMessage(value);
}
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
