用户可上传3 - 6张图片(第1 2 3张必须传),上传的图片必须是540 * 330像素。
初始化一个对象数组,宽高均设为0。
如果用户上传的图片没有上限,可以动态修改这个对象数组。
数据:
picArray:(
{
宽度:0,
高度:0
}，
{
宽度:0,
高度:0
}，
{
宽度:0,
高度:0
}，
{
宽度:0,
高度:0
}，
{
宽度:0,
高度:0
}，
{
宽度:0,
高度:0
}
),
HTML:
& lt; myupload:键="指数" @getBase=癵etUpImg”比;
& lt;/myupload>
myupload是上传图片的组件,略只
方法:
getUpImg (imgurl键){
如果(键===9){
this.submitData。logo_img=imgurl
这一点。logoImgCount=true
其他}{
Vue.set (this.imgListArray、钥匙、imgurl)
美元。nextTick(函数(){
让img=文档。getElementById (“picId”+键)//console.log (img)
让picArray=this.picArray
img。onload=function () {
console.log(键)
console.log (this.naturalWidth)
console.log (this.naturalHeight)
让o={
宽度:this.naturalWidth,
高度:this.naturalHeight
}
Vue.set (picArray、钥匙、o)
控制台。日志(picArray, picArray)
}
}）
}
}，
之前
关键的代码用红色标出了。
值得注意的是:获取宽高必须用这个。nextTick美元,里面再写img。onload。。naturalWidth是图片原本的宽高。此时这指的是当前图片对象。
方法:
imageCheck () {
让checkboolean=true
我们检查={
“宽度”:[[540],[0540]],
“高度”:[[330],[0330]]
}
让f1=function (num、索引类型){
让n=num
让我=指数
让t=类型
让b=false//console.log (n, t)
(让x=0;x & lt;检查[型][我]. length;x + +) {
如果(检查[型][我][x]===num) {//console.log(',祝辞的在在在在在在在在在在在在“+检查[型][我][x] + '===+ num +”,在祝辞的在在在在在在在在在在在在在在”)
b=true
}
}
返回b
}
(让我=0;我& lt;this.picArray.length;我+ +){
让cb=true
(让x this.picArray[我]){
让数量=this.picArray[我][x]//console.log (x,数量)
if (x===翱矶取?,我& lt;3){
checkboolean=f1(数字,0,“宽度”)
如果(! checkboolean) {//控制台。日志('=================',我,x,数,返回false)
cb=false
打破
}
}else if (x===翱矶取?,我在=3){
checkboolean=f1(数量1“宽度”)
如果(! checkboolean) {//控制台。日志('=================',我,x,数,返回false)
cb=false
打破
}
}else if (x===案叨取?,我& lt;3){
checkboolean=f1(数字,0,“高”)
如果(! checkboolean) {//控制台。日志('=================',我,x,数,返回false)
cb=false
打破
}
}else if (x===案叨取?,我在=3){
checkboolean=f1(数字,1,“高”)
如果(! checkboolean) {//控制台。日志('=================',我,x,数,返回false)
cb=false
打破
}
}
}
如果(cb) {
打破
}
}
返回checkboolean
}，//sumbit函数
…
如果(! this.imageCheck ()) {
美元。消息({
信息:this.MASSAGE_imagecheck,
类型:“错误”
});
返回假
}
alert('可以传图”)
…
之前
消息是美元elementUI的组件。
imageCheck就是检验图片宽高用的方法。返回布尔值,假表示图片宽高不符合要求(或者没有传图)。
其中:
checkboolean是最终要返回的布尔值。
检查是装载合法宽高值的对象。因为后3张图可传可不传,所以宽度和高度都是二阶数组。数字是符合要求的值。
f1是检验某一张图宽高的函数,传入宽高值,下标(第几张),类型(宽高),返回布尔值,假表示图片宽高不符合要求(或者没有传图)。
执行imageCheck方法的时候会直接执行循环,如果发现图片不符合要求就跳出并返回假给函数外。
里循环中的x代表类型,我代表下标。
使用:在提交时执行imageCheck方法即可。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
