angular實(shí)現(xiàn)IM聊天圖片發(fā)送實(shí)例
IM聊天圖片發(fā)送有兩種方式
- 截圖粘貼到信息框后點(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); }
圖片上傳服務(wù)器
前端angular上傳圖片到服務(wù)器,必然是ajax請求的方式,將圖片數(shù)據(jù)轉(zhuǎn)成二進(jìn)制流傳給后端了。
url:string="http://localhost:8080/upload"; progress:number=0;//進(jìn)度 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后端驗證,設(shè)置請求頭部信息,解決跨域 xhr.setRequestHeader("Authorization", "Basic " + localStorage.getItem('jwt')); xhr.send(formData); } }
將以上方法寫到一個 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í)有所幫助,也希望大家多多支持腳本之家。
- 詳解Angularjs 如何自定義Img的ng-load 事件
- Angular指令封裝jQuery日期時間插件datetimepicker實(shí)現(xiàn)雙向綁定示例
- Angular2-primeNG文件上傳模塊FileUpload使用詳解
- Angular2 PrimeNG分頁模塊學(xué)習(xí)
- AngularJS定時器的使用與移除操作方法【interval與timeout】
- AngularJs中Bootstrap3 datetimepicker使用實(shí)例
- AngularJS中$watch和$timeout的使用示例
- 仿Angular Bootstrap TimePicker創(chuàng)建分鐘數(shù)-秒數(shù)的輸入控件
- angularjs封裝bootstrap時間插件datetimepicker
相關(guān)文章
AngualrJS中每次$http請求時的一個遮罩層Directive
AngularJS是一款非常強(qiáng)大的前端MVC框架。接下來通過本文給大家介紹AngualrJS中每次$http請求時的一個遮罩層Directive,本文非常具有參考借鑒價值,特此分享供大家學(xué)習(xí)2016-01-01AngularJS中如何使用$parse或$eval在運(yùn)行時對Scope變量賦值
這篇文章主要介紹了AngularJS中如何使用$parse或$eval在運(yùn)行時對Scope變量賦值的相關(guān)資料,本文介紹的非常詳細(xì),具有參考借鑒價值,需要的朋友可以參考下2016-01-01AngularJS輔助庫browserTrigger用法示例
這篇文章主要介紹了AngularJS輔助庫browserTrigger用法,結(jié)合實(shí)例形式分析了輔助庫browserTrigger的功能及單元測試中的使用技巧,需要的朋友可以參考下2016-11-11Angular的Bootstrap(引導(dǎo))和Compiler(編譯)機(jī)制
這篇文章主要介紹了Angular的Bootstrap(引導(dǎo))和Compiler(編譯)機(jī)制的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-06-06angularjs過濾器--filter與ng-repeat配合有奇效
本篇文章主要介紹了angularjs過濾器-filter與ng-repeat的相關(guān)知識。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04自學(xué)實(shí)現(xiàn)angularjs依賴注入
這篇文章主要為大家詳細(xì)介紹了angularjs依賴注入的自己成果,如何實(shí)現(xiàn)angularjs依賴注入,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-12-12