在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()方法異步，

多次實驗證明，iview的before-upload 中不支持 async，await，使用它們來做異步，return false 圖片還是會被上傳，后查證發現，是return 的是Promise對象,這里待研究補充

 參考文獻;

https://blog.csdn.net/stevenxyy/article/details/101059772

https://www.jianshu.com/p/b4fd76c61dc9

 

上傳前判斷視頻寬高比

          // 視頻上傳前處理
          // 寬高比例為16:9
          // 獲取上傳的視頻的寬高
          return new Promise((resolve, reject) => {
            var videoUrl = URL.createObjectURL(file);
            var videoObj = document.createElement("video");

            videoObj.onloadedmetadata = function() {
              URL.revokeObjectURL(videoUrl);
              //   console.log(
              //     "視頻寬高" + videoObj.videoWidth + videoObj.videoHeight
              //   );
              if (videoObj.videoWidth / videoObj.videoHeight != 16 / 9) {
                _this.$Modal.warning({
                  title: "視頻不合規",
                  content: "上傳的視頻的寬高要按照標准的16:9的比例。",
                  onOk() {}
                });
                reject(false);
              }
              resolve(true);
            };
            videoObj.src = videoUrl;
            videoObj.load();
          });