vue 检测用户上传图片宽高的方法

2023-08-02 00:38:04 150

需求：

用户可上传3-6张图片（第123张必须传），上传的图片必须是540*330像素。

第一步，获取上传的图片的宽高。

初始化一个对象数组，宽高均设为0。

如果用户上传的图片没有上限，可以动态修改这个对象数组。

data:

picArray:[
{
width:0,
height:0
},
{
width:0,
height:0
},
{
width:0,
height:0
},
{
width:0,
height:0
},
{
width:0,
height:0
},
{
width:0,
height:0
}
],

HTML:

myupload是上传图片的组件，略。

methods:

getUpImg(imgurl,keys){
if(keys===9){
this.submitData.logo_img=imgurl
this.logoImgCount=true
}else{
Vue.set(this.imgListArray,keys,imgurl)

this.$nextTick(function(){
letimg=document.getElementById('picId'+keys)
//console.log(img)
letpicArray=this.picArray
img.onload=function(){
console.log(keys)
console.log(this.naturalWidth)
console.log(this.naturalHeight)
leto={
width:this.naturalWidth,
height:this.naturalHeight
}
Vue.set(picArray,keys,o)
console.log('picArray',picArray)
}
})
}
},

关键的代码用红色标出了。

值得注意的是：获取宽高必须用this.$nextTick，里面再写img.onload。this.naturalWidth是图片原本的宽高。此时this指的是当前图片对象。

第二步，提交之前检验图片的宽高。

methods:

imageCheck(){
letcheckboolean=true
letcheck={
'width':[[540],[0,540]],
'height':[[330],[0,330]]
}
letf1=function(num,index,type){
letn=num
leti=index
lett=type
letb=false
//console.log(n,i,t)
for(letx=0;x>>>>>>>>>>>>'+check[type][i][x]+'==='+num+'>>>>>>>>>>>>>>>>')
b=true
}
}
returnb
}
for(leti=0;i=3){
checkboolean=f1(number,1,'width')
if(!checkboolean){
//console.log('=================',i,x,number,'returnfalse')
cb=false
break
}
}elseif(x==='height'&&i<3){
checkboolean=f1(number,0,'height')
if(!checkboolean){
//console.log('=================',i,x,number,'returnfalse')
cb=false
break
}
}elseif(x==='height'&&i>=3){
checkboolean=f1(number,1,'height')
if(!checkboolean){
//console.log('=================',i,x,number,'returnfalse')
cb=false
break
}
}
}

if(!cb){
break
}
}
returncheckboolean
},


//sumbitfunction
...
if(!this.imageCheck()){
this.$message({
message:this.MASSAGE_imagecheck,
type:'error'
});
returnfalse
}
alert('可以传图')
...

$message是elementUI的组件。

imageCheck就是检验图片宽高用的方法。返回布尔值，false表示图片宽高不符合要求（或者没有传图）。

其中：

checkboolean是最终要返回的布尔值。

check是装载合法宽高值的对象。因为后3张图可传可不传，所以width和height都是二阶数组。数字是符合要求的值。

f1是检验某一张图宽高的函数，传入宽高值、下标（第几张）、类型（widthheight），返回布尔值，false表示图片宽高不符合要求（或者没有传图）。

执行imageCheck方法的时候会直接执行循环，如果发现图片不符合要求就跳出并返回false给函数外。

里循环中的x代表类型，i代表下标。

使用：在提交时执行imageCheck方法即可。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

vue 检测用户上传图片宽高的方法

热门推荐

随机推荐