如何在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)

}