欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

js上传图片获取原始宽高

程序员文章站 2022-06-21 14:53:18
...

以vue上传图片为例:

<template>
  <div>
    <input type="file" @change="uploadFile($event)" multiple="multiple" />
  </div>
</template>

<script>
  export default {
    name: 'upload',
    data () {
      return {
        imgInfo: {}
      }
    },
    methods:{
      uploadFile(event){
        let that = this;
        let file = event.target.files[0];
        let fileReader = new FileReader();
        fileReader.readAsDataURL(file); //根据图片路径读取图片
        fileReader.onload = function(e) {
          let base64 = this.result;
          let img = new Image();
          img.src = base64;
          img.onload = function() {
            that.imgInfo = {
              width: img.naturalWidth,
              height: img.naturalHeight
            };
            console.log("宽:" + img.naturalWidth + " 高:" + img.naturalHeight);
          }
        }
      }
    }
  }
</script>