[Vuejs]-Check file's width and height before upload in Vue.js?

0👍

Try the following.

      this.image.size = file.size;
      let reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = evt => {
        let img = new Image();
        img.onload = () => {
          this.image.width = img.width;
          this.image.height = img.height;
          this.imageLoaded = true;
        }
        img.src = evt.target.result;
      }


Would you like to try the following?

This is the source code that I tested.

  <div>
    <input type="file" @change="onThemeChange" />
    {{ meta }}
  </div>

 export default class ComponentName extends Vue {
     meta: any = null;
    
        onThemeChange(event: any) {
          const file = event.target.files[0];
    
          let reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = (evt: any) => {
            let img = new Image();
            const meta = (img.onload = () => {
              return {
                size: event.target.files[0].size,
                width: img.width,
                height: img.height,
              };
            });
            img.src = evt.target.result;
            this.meta = meta();
          };
        }
    }

-1👍

const fileReader = new FileReader();
const image = new Image();
fileReader.onload = function (e) {
    image.src = e.target.result;
    image.onload = function() {
        console.log(this.width, this.height);
    }
}

Leave a comment