在Vue專案裡,利用Iview的upload元件,上傳圖片,在圖片上傳前,判斷圖片尺寸
阿新 • • 發佈:2020-07-16
handleBeforeUpload(file) { let _this = this return new Promise((resolve, reject) => { const check = _this.uploadList.length < _this.mutileUploadData.maxNum if (!check) { this.$Notice.warning({ title: '最多上傳' + this.mutileUploadData.maxNum + '張' }) reject(false)//重點 } debugger let image = new Image() image.src = URL.createObjectURL(file) image.onload = () => { let width = _this.mutileUploadData.maxWidth let height = _this.mutileUploadData.maxHeightif ( (width && image.width > width) || (height && image.height > height) ) { this.$Modal.warning({ title: '圖片尺寸', content: '圖片尺寸 ' + file.name + ' 太大,不能超過' + this.mutileUploadData.maxWidth + '*' + this.mutileUploadData.maxHeight + '。', onOk() {} }) reject(false)//重點 } resolve(true)//重點 } image.onerror = () => { reject() } }) }
為什麼要用Promise呢,因為image.onload()方法非同步,