1. 程式人生 > 實用技巧 >在Vue專案裡,利用Iview的upload元件,上傳圖片,在圖片上傳前,判斷圖片尺寸

在Vue專案裡,利用Iview的upload元件,上傳圖片,在圖片上傳前,判斷圖片尺寸

     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.maxHeight
if ( (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()方法非同步,