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)開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('暫不支持該類型圖片');
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('暫不支持該類型圖片');
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)文章
vue 中動(dòng)態(tài)綁定class 和 style的方法代碼詳解
這篇文章主要介紹了vue 中動(dòng)態(tài)綁定class 和 style的方法,通過(guò)實(shí)例結(jié)合的形式給大家接受的非常詳細(xì),需要的朋友參考下吧2018-06-06
解決vue項(xiàng)目報(bào)錯(cuò)webpackJsonp is not defined問(wèn)題
下面小編就為大家分享一篇解決vue項(xiàng)目報(bào)錯(cuò)webpackJsonp is not defined問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
vue3+element?plus實(shí)現(xiàn)側(cè)邊欄過(guò)程
這篇文章主要介紹了vue3+element?plus實(shí)現(xiàn)側(cè)邊欄過(guò)程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue中v-for數(shù)據(jù)狀態(tài)值變了,但是視圖沒(méi)改變的解決方案
這篇文章主要介紹了vue中v-for數(shù)據(jù)狀態(tài)值變了,但是視圖沒(méi)改變的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-06-06
Vue 設(shè)置axios請(qǐng)求格式為form-data的操作步驟
今天小編就為大家分享一篇Vue 設(shè)置axios請(qǐng)求格式為form-data的操作步驟,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
Vue Echarts實(shí)現(xiàn)可視化世界地圖代碼實(shí)例
這篇文章主要介紹了Vue Echarts實(shí)現(xiàn)可視化世界地圖,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05

