vue获取上传图片的宽度

最新推荐文章于 2025-06-17 15:48:08 发布

爱意迷了眼丶

最新推荐文章于 2025-06-17 15:48:08 发布

阅读量477

点赞数 3

CC 4.0 BY-SA版权

文章标签：前端 javascript html

本文链接：https://blog.youkuaiyun.com/m0_72027585/article/details/139921202

<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>