溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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)
};
}
}
本地圖片選擇
<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);
}
圖片上傳服務器
前端angular上傳圖片到服務器，必然是ajax請求的方式，將圖片數據轉成二進制流傳給后端了。
url:string="http://localhost:8080/upload";
progress:number=0;//進度
uploadPic(formData):Promise<any> {
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('<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);
}
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
