need:
Users can upload 3-6 pictures (the 123 must be transmitted), and the uploaded pictures must be 540 * 330 pixels.
The first step is to obtain the width and height of the uploaded image.
Initialize an object array, set both width and height to 0.
If the image uploaded by the user has no upper limit, you can dynamically modify this object array.
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 :keys="index" @getBase="getUpImg">
</myupload>
myupload is the component for uploading pictures, omitted.
methods:
getUpImg(imgurl, keys){
if(keys === 9){
.logo_img = imgurl
= true
} else {
(,keys,imgurl)
this.$nextTick(function(){
let img = ('picId' + keys)
// (img)
let picArray =
= function () {
(keys)
()
()
let o = {
width: ,
height:
}
(picArray,keys,o)
('picArray', picArray)
}
})
}
},
The key code is marked in red.
It is worth noting that: to obtain width and height, you must use this.$nextTick and write it in it. It is the original width and height of the picture. At this time this refers to the current image object.
The second step is to check the width and height of the picture before submitting.
methods:
imageCheck(){
let checkboolean = true
let check = {
'width': [[540],[0,540]],
'height': [[330],[0,330]]
}
let f1 = function (num,index,type) {
let n = num
let i = index
let t = type
let b = false
// (n,i,t)
for (let x = 0; x < check[type][i].length; x++) {
if (check[type][i][x] === num) {
// ('>>>>>>>>>>>>>' + check[type][i][x] + '===' + num + '>>>>>>>>>>>>>>>>' )
b = true
}
}
return b
}
for (let i = 0; i < ; i++) {
let cb = true
for (let x in [i]) {
let number = [i][x]
// (x,number)
if (x === 'width' && i < 3) {
checkboolean = f1(number, 0, 'width')
if (!checkboolean) {
// ('=================',i,x,number,'return false')
cb = false
break
}
} else if (x === 'width' && i >= 3) {
checkboolean = f1(number, 1, 'width')
if (!checkboolean) {
// ('=================',i,x,number,'return false')
cb = false
break
}
} else if (x === 'height' && i < 3) {
checkboolean = f1(number, 0, 'height')
if (!checkboolean) {
// ('=================',i,x,number,'return false')
cb = false
break
}
} else if (x === 'height' && i >= 3) {
checkboolean = f1(number, 1, 'height')
if (!checkboolean) {
// ('=================',i,x,number,'return false')
cb = false
break
}
}
}
if (!cb) {
break
}
}
return checkboolean
},
// sumbit function
...
if(!()){
this.$message({
message: this.MASSAGE_imagecheck,
type: 'error'
});
return false
}
alert('You can pass pictures')
...
$message is a component of elementUI.
imageCheck is the method to check the width and height of the picture. Returns a boolean value, false means that the width and height of the image do not meet the requirements (or there is no image transmission).
in:
checkboolean is the boolean value to be returned in the end.
check is an object that loads the legal width and height value. Because the last three pictures can be passed or not, width and height are both second-order arrays. Numbers are values that meet the requirements.
f1 is a function to test the width and height of a certain picture. It passes in the width and height value, subscript (that is the picture), and type (width height), and returns a Boolean value. False means that the width and height of the picture do not meet the requirements (or there is no picture passed).
When executing the imageCheck method, the loop will be executed directly. If it is found that the image does not meet the requirements, it will jump out and return false to outside the function.
The x in the loop represents type, and i represents subscript.
Use: just execute the imageCheck method when submitting.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.