获取上传图片的大小和尺寸

element UI 上传图片的需要判断图片的尺寸和大小

image.png

 <input type="file" @change="upload" />

  methods: {
    upload(e) {
      const files = e.target.files
      console.log(files[0])
      const imageSize = (files[0].size / 1024 / 1024).toFixed(2) + 'MB'
      const fileBase64 = await this.getBase64(file)
      const res = await this.getImgPx(fileBase64)
      const imgePX = res.width + 'px *' + res.height + 'px'
      console.log('imgePX', imgePX)
      console.log('imageSize', imageSize)
    },

    getBase64(file) {
      const reader = new FileReader()
      reader.readAsDataURL(file)
      return new Promise((resolve) => {
        reader.onload = () => {
          resolve(reader.result)
        }
      })
    },

    getImgPx(img) {
      const image = new Image()
      image.src = img
      return new Promise((resolve) => {
        image.onload = () => {
          const width = image.width
          const height = image.height
          resolve({ width, height })
        }
      })
    },
  },