js上傳圖片獲取原始寬高

以vue上傳圖片為例：

<template>
  <div>
    <input type="file" @change="uploadFile($event)" multiple="multiple" />
  </div>
</template>
 
<script>
  export default {
    name: 'upload',
    data () {
      return {
        imgInfo: {}
      }
    },
    methods:{
      uploadFile(event){
        let that = this;
        let file = event.target.files[0];
        let fileReader = new FileReader();
        fileReader.readAsDataURL(file); //根據圖片路徑讀取圖片
        fileReader.onload = function(e) {
          let base64 = this.result;
          let img = new Image();
          img.src = base64;
          img.onload = function() {
            that.imgInfo = {
              width: img.naturalWidth,
              height: img.naturalHeight
            };
            console.log("寬：" + img.naturalWidth + " 高：" + img.naturalHeight);
          }
        }
      }
    }
  }
</script>