vue获取上传图片的宽度

<template>
  <div>
    <input type="file" @change="getImageWidth" />
    <p v-if="imageWidth">图片宽度: {{ imageWidth }}px</p>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      imageWidth: null
    };
  },
  methods: {
    getImageWidth(event) {
      const file = event.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = (e) => {
          const img = new Image();
          img.onload = () => {
            this.imageWidth = img.width;
            URL.revokeObjectURL(img.src); // 释放URL对象
          };
          img.src = e.target.result;
        };
        reader.readAsDataURL(file);
      }
    }
  }
};
</script>