溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
需求：
用戶可上傳3-6張圖片（第 1 2 3 張必須傳），上傳的圖片必須是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 :keys="index" @getBase="getUpImg">
</myupload>
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(){
let img = document.getElementById('picId' + keys)
// console.log(img)
let picArray = this.picArray
img.onload = function () {
console.log(keys)
console.log(this.naturalWidth)
console.log(this.naturalHeight)
let o = {
width: this.naturalWidth,
height: this.naturalHeight
}
Vue.set(picArray,keys,o)
console.log('picArray', picArray)
}
})
}
},
關鍵的代碼用紅色標出了。
值得注意的是：獲取寬高必須用 this.$nextTick ，里面再寫 img.onload 。this.naturalWidth 是圖片原本的寬高。此時 this 指的是當前圖片對象。
第二步，提交之前檢驗圖片的寬高。
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
// console.log(n,i,t)
for (let x = 0; x < check[type][i].length; x++) {
if (check[type][i][x] === num) {
// console.log('>>>>>>>>>>>>>' + check[type][i][x] + '===' + num + '>>>>>>>>>>>>>>>>' )
b = true
}
}
return b
}
for (let i = 0; i < this.picArray.length; i++) {
let cb = true
for (let x in this.picArray[i]) {
let number = this.picArray[i][x]
// console.log(x,number)
if (x === 'width' && i < 3) {
checkboolean = f1(number, 0, 'width')
if (!checkboolean) {
// console.log('=================',i,x,number,'return false')
cb = false
break
}
} else if (x === 'width' && i >= 3) {
checkboolean = f1(number, 1, 'width')
if (!checkboolean) {
// console.log('=================',i,x,number,'return false')
cb = false
break
}
} else if (x === 'height' && i < 3) {
checkboolean = f1(number, 0, 'height')
if (!checkboolean) {
// console.log('=================',i,x,number,'return false')
cb = false
break
}
} else if (x === 'height' && i >= 3) {
checkboolean = f1(number, 1, 'height')
if (!checkboolean) {
// console.log('=================',i,x,number,'return false')
cb = false
break
}
}
}
if (!cb) {
break
}
}
return checkboolean
},
// sumbit function
...
if(!this.imageCheck()){
this.$message({
message: this.MASSAGE_imagecheck,
type: 'error'
});
return false
}
alert('可以傳圖')
...
$message 是elementUI的組件。
imageCheck 就是檢驗圖片寬高用的方法。返回布爾值，false表示圖片寬高不符合要求（或者沒有傳圖）。
其中：
checkboolean 是最終要返回的布爾值。
check 是裝載合法寬高值的對象。因為后3張圖可傳可不傳，所以 width 和 height 都是二階數組。數字是符合要求的值。
f1 是檢驗某一張圖寬高的函數，傳入寬高值、下標（第幾張）、類型（width height），返回布爾值，false表示圖片寬高不符合要求（或者沒有傳圖）。
執行 imageCheck 方法的時候會直接執行循環，如果發現圖片不符合要求就跳出并返回 false 給函數外。
里循環中的 x 代表類型，i 代表下標。
使用：在提交時執行 imageCheck 方法即可。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
