vue在圖片上傳的時(shí)候壓縮圖片
需求:
上傳到服務(wù)器的圖片太大會(huì)導(dǎo)致服務(wù)器承受不了,故在前端傳圖片的時(shí)候?qū)D片壓縮后再傳到服務(wù)器
直接上代碼
async getRealName(){ let nickname = this.nickname.trim() let idnum = this.idnum.trim() let nameReg = /[\u4e00-\u9fa5]/gm let idnumReg = /^[a-z0-9]+$/i let zheng1 = document.getElementById("file1").files[0] let fan1 = document.getElementById("file2").files[0] if(nickname.length < 1) { return Toast('請(qǐng)輸入姓名') } if(idnum.length < 1) { return Toast('請(qǐng)輸入身份證號(hào)碼') } if(!zheng1) { return Toast('請(qǐng)上傳身份證信息頁(yè)') } if(!fan1) { return Toast('請(qǐng)上傳身份證國(guó)徽頁(yè)') } if(zheng1.size/1024 > 1025) { this.imgCompress(zheng1,{quality:0.2},'zheng') }else { this.zheng = zheng1 } if(fan1.size / 1024 > 1025) { this.imgCompress(fan1,{quality:0.2},'fan') }else { this.fan = fan1 } setTimeout(()=>{ let data = new FormData() data.append('nickname',nickname);//添加form表單中其他數(shù)據(jù) data.append('idnum',idnum) data.append('zheng',this.zheng,zheng1.name) data.append("fan",this.fan,fan1.name) let apiauth = localStorage.getItem('apiauth') let config = { headers:{'Content-Type':'multipart/form-data'}, herders:{apiauth:apiauth} } axios.post("http://api139.ys11.ipfsico.com/index/index/realname",data,config).then((res)=>{ Toast(res.data.msg) if(res.data.code == 1) { this.$router.replace({path:'/msite'}) } }) },1000) }, //圖片壓縮 imgCompress(path,obj,statu){ let _this = this //這里的this 是把vue的實(shí)例對(duì)象指向改變?yōu)開(kāi)this var img = new Image(); if(statu == 'zheng') { img.src = _this.avatar1; }else { img.src = _this.avatar2 } img.onload = function(){ var that = this; //這里的this 是把img的對(duì)象指向改變?yōu)閠hat // 默認(rèn)按比例壓縮 var w = that.width, h = that.height, scale = w / h; w = obj.width || w; h = obj.height || (w / scale); var quality = 0.7; // 默認(rèn)圖片質(zhì)量為0.7 //生成canvas var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); // 創(chuàng)建屬性節(jié)點(diǎn) var anw = document.createAttribute("width"); anw.nodeValue = w; var anh = document.createAttribute("height"); anh.nodeValue = h; canvas.setAttributeNode(anw); canvas.setAttributeNode(anh); ctx.drawImage(that, 0, 0, w, h); // 圖像質(zhì)量 if(obj.quality && obj.quality <= 1 && obj.quality > 0){ quality = obj.quality; } // quality值越小,所繪制出的圖像越模糊 var base64 = canvas.toDataURL('image/jpeg', quality); // 回調(diào)函數(shù)返回base64的值 var urlFile = _this.convertBase64UrlToBlob(base64) //這個(gè)地方的處理是為了把壓縮的base64轉(zhuǎn)化為對(duì)象,獲得壓縮后圖片的大小size,方便對(duì)壓縮后的圖片再次進(jìn)行判斷; // console.log(urlFile) let file = _this.blobToFile(urlFile,path.name) console.log(file) if(statu == 'zheng') { _this.zheng = file }else { _this.fan = file } if(urlFile.size/1024 > 1025){ Toast("圖片過(guò)大,請(qǐng)重新上傳圖片") } } }, convertBase64UrlToBlob(urlData){ var arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while(n--){ u8arr[n] = bstr.charCodeAt(n); } return new Blob([u8arr], {type:mime}); }, blobToFile(theBlob, fileName){ theBlob.lastModifiedDate = new Date(); theBlob.name = fileName; return theBlob; }, changeImage(e) { console.log(e.target.files) if(e.target.files[0]){ this.ownImg = false var file = e.target.files[0]; console.log(file) let filemaxsize = 4096 let size = file.size / 1024 if (size > filemaxsize){ Toast('您上傳的圖片過(guò)大,請(qǐng)重新選擇') this.disabled = true; this.formatImg = false return false } var name = file.name var fileTypes = [".jpg", ".png"]; if(name) { var isNext = false; var fileEnd = name.substring(name.indexOf(".")); for (var i = 0; i < fileTypes.length; i++) { if (fileTypes[i] == fileEnd) { console.log(fileTypes[i]) isNext = true; this.disabled = false; this.formatImg = true; break; } } if (!isNext){ Toast('暫不支持該類(lèi)型圖片'); name = ""; this.disabled = true; this.formatImg = false return false; } } var reader = new FileReader() var that = this var image = new Image() reader.readAsDataURL(file) reader.onload = function(e) { that.avatar1 = this.result } } }, changeImg(event){ var file = event.target.files[0] var name = file.name var fileTypes = [".jpg", ".png"]; if(name) { var isNext = false; var fileEnd = name.substring(name.indexOf(".")); for (var i = 0; i < fileTypes.length; i++) { if (fileTypes[i] == fileEnd) { console.log(fileTypes[i]) isNext = true; this.disabled = false; this.formatImg = true; break; } } if (!isNext){ Toast('暫不支持該類(lèi)型圖片'); name = ""; this.disabled = true; this.formatImg = false return false; } } var reader = new FileReader() var that = this reader.readAsDataURL(file) reader.onload = function(event) { that.avatar2 = this.result } }
以上就是vue在圖片上傳的時(shí)候壓縮圖片的詳細(xì)內(nèi)容,更多關(guān)于vue 壓縮圖片的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Vue3?Composition?API優(yōu)雅封裝第三方組件實(shí)例
這篇文章主要為大家介紹了Vue3?Composition?API優(yōu)雅封裝第三方組件實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07vue模板配置與webstorm代碼格式規(guī)范設(shè)置
這篇文章主要介紹了vue模板配置與webstorm代碼格式規(guī)范設(shè)置詳細(xì)的相關(guān)資料,需要的朋友可以參考一下文章得具體內(nèi)容,希望對(duì)你有所幫助2021-10-10使用vue打包時(shí)vendor文件過(guò)大或者是app.js文件很大的問(wèn)題
這篇文章主要介紹了使用vue打包時(shí)vendor文件過(guò)大或者是app.js文件很大問(wèn)題的解決方法,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-06-06vue-cli5搭建vue項(xiàng)目的實(shí)現(xiàn)步驟
本文主要介紹了vue-cli5搭建vue項(xiàng)目的實(shí)現(xiàn)步驟,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05vue項(xiàng)目打包后部署到服務(wù)器的詳細(xì)步驟
這篇文章主要介紹了vue項(xiàng)目打包后部署到服務(wù)器,本文通過(guò)圖文并茂的形式給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-09-09Vue?element-ui中表格過(guò)長(zhǎng)內(nèi)容隱藏顯示的實(shí)現(xiàn)方式
在Vue項(xiàng)目中,使用ElementUI渲染表格數(shù)據(jù)時(shí),如果某一個(gè)列數(shù)值長(zhǎng)度超過(guò)列寬,會(huì)默認(rèn)換行,造成顯示不友好,下面這篇文章主要給大家介紹了關(guān)于Vue?element-ui中表格過(guò)長(zhǎng)內(nèi)容隱藏顯示的實(shí)現(xiàn)方式,需要的朋友可以參考下2022-09-09vue toggle做一個(gè)點(diǎn)擊切換class(實(shí)例講解)
下面小編就為大家分享一篇使用vue toggle實(shí)現(xiàn)點(diǎn)擊切換class的示例。具有很好的參考價(jià)值。希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03Vue動(dòng)態(tài)生成el-checkbox點(diǎn)擊無(wú)法賦值的解決方法
這篇文章主要給大家介紹了關(guān)于Vue動(dòng)態(tài)生成el-checkbox點(diǎn)擊無(wú)法賦值的解決方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02