如何在vue项目中将获取图片宽度和高度尺寸的异步函数换成同步

Question

1.在上传前通过获取input空间中的file文件，想获取这个图片的宽度和高度，但是因为FileReader类和Image类都要异步加载，总是不能同步处理，用了promise 和 async，await尝试了但是掌握的不好，没有效果，想请问一下如何修改这段代码，让我能够直接调用这个方法就能获取宽度和高度？

function util() {
  let reader = new FileReader()
  reader.onload = function (e) {
    let data = e.target.result
    let img = new Image()
    img.src = data
    img.onload = function () {
      console.log('width', img.width)
      console.log('height', img.height)
    }
  }
  reader.readAsDataURL(file)
}

Answer 1

1.promise化

function util() {
  return new Promise((resolve, reject) => {
    let reader = new FileReader()
    reader.onload = function (e) {
      let data = e.target.result
      let img = new Image()
      img.src = data
      img.onload = function () {
        resovle({
          width: img.width,
          height: img.height
        })
        console.log('width', img.width)
        console.log('height', img.height)
      }
    }
    reader.readAsDataURL(file)
  })
}

2.调用

async function getImg() {
  let img = await util()
  console.log('width', img.width)
  console.log('height', img.height)
}