Vue elementui 上传前获取图片宽度尺寸和大小

项目中用到elementui上传组件，但是on-change钩子函数中file参数只能拿到文件名字和大小，
如果是图片就拿不到图片的宽高，不符合目前的需求，所以采用如下方式进行处理
采用手动上传

代码如下：

<el-upload
            ref="upload"
            style="display: inline-block;"
            action="/file/uploadToTmp"
            accept=".jpg, .jpeg, .gif, .png"
            :show-file-list="false"
            :limit="1"
            :auto-upload="false"
            :file-list="fileList"
            :on-change="handleChange"
            :on-success="uploadSuccess"
            :on-error="uploadError"
            :data="{atlasId: atlasId}">
            <el-button size="small" type="primary">本地上传</el-button>
            <!--<div slot="tip" class="el-upload__tip">图片比例2：1，分辨率要求不小于：6000 × 3000 像素，文件大小要求不大于30M</div>-->
          </el-upload>
	data() {
		return {
			fileList: []
		}
	}
	handleChange(file) {
      this.sceneForm.uploadType = 0;
      let fileSize = file.size / 1024 / 1024;
      fileSize = Math.floor(fileSize * 1000) / 1000; // 小数取整后三位
      const isLt30M = fileSize < 30;
      if (!isLt30M) {
        this.$message.warning(`上传图片大小不能超过 30MB!,当前文件大小${fileSize}MB`);
        return false
      }
      this.asyncImgChecked(file).then(data => {
        if (data) {
          this.$refs.upload.submit();
        } else {
          this.fileList = []
        }
      });
    },
    asyncImgChecked(file) {
      return new Promise((resolve, reject) => {
        let reader = new FileReader();
        reader.readAsDataURL(file.raw); // 必须用file.raw
        reader.onload = () => { // 让页面中的img标签的src指向读取的路径
          let img = new Image();
          img.src = reader.result;
          if (img.complete) { // 如果存在浏览器缓存中
            if (img.width / img.height !== 2) {
              this.$message.warning(`图片比例2：1,当前文件${img.width}×${img.height}`);
              resolve(false)
            } else {
              resolve(true)
            }
          } else {
            img.onload = () => {
              if (img.width / img.height !== 2) {
                this.$message.warning(`图片比例2：1,当前文件${img.width}×${img.height}`);
                resolve(false)
              } else {
                resolve(true)
              }
            }
          }
        };
      })
    }
          

参考博客：
https://www.cnblogs.com/dawenyang/p/12369600.html