input file上传前计算图片大小，根据宽高比自适应父级DIV

<a-card title="上传前计算图片" style="margin-top: 24px;">
         <input id="fileInupt" type="file" @change="inputchange" />
         <a-button  type="primary" @click="buttonClick">选择文件</a-button><br><br>
         <div style="width:200px;height:200px;position: relative;border:1px solid #f1f1f1;background: #c7c4c4;overflow:hidden">
              <img id="img" src="" style="position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)" />
         </div>
</a-card>

data () {
  return {
    imgSrc: '',
    // 0宽1窄
    isWidth: 0
  }
}

inputchange () {
  var preview = document.getElementById('img')
  var file = document.getElementById('fileInupt').files[0]
  var reader = new FileReader()
  reader.addEventListener('load', function () {
    preview.onload = function () {
      this.isWidth = this.width > this.height ? 0 : 1
        if (this.isWidth === 1) {
          document.getElementById('img').style.width = 'auto'
          document.getElementById('img').style.height = '100%'
        } else {
          document.getElementById('img').style.width = '100%'
          document.getElementById('img').style.height = 'auto'
        }
    }
    preview.src = reader.result
    this.imgSrc = reader.result
  }, false)
  if (file) {
    reader.readAsDataURL(file)
  }
},
buttonClick () {
  const fileInupt = document.getElementById('fileInupt')
  fileInupt.click()
}

效果图