Get width/height of uploaded by vue-upload-component image

Question

Looking how vue-upload-component works (https://lian-yue.github.io/vue-upload-component/#/documents) on events when file is uploaded I see structure of avatarFiles array with uploaded file:

            <file-upload
                    ref="upload"
                    v-model="avatarFiles"
                    post-action="/post.method"
                    put-action="/put.method"
                    @input-file="inputFile"
                    @input-filter="inputFilter"
                    :multiple="false"
                    class="btn btn-outline-danger btn-sm"
            >
                Upload avatar
            </file-upload>

I do not see width/height of any uploaded file. If there is a way to add this info too? Or some other vuejs way to get width/height of any uploaded file ?

vuejs 2.6

I try to check event when image is uploaded with:

MODIFIED :

watch:{
    avatarFiles(file){
        console.log("-1 avatarFiles file::")
        console.log( file )

        var image = new FileReader();
        console.log("-2 avatarFiles image::")
        console.log( image )
        image.onload = () => {
            console.log("-3 avatarFiles file::")
            console.log( file )
            console.log(`the image dimensions are ${img.width}x${img.height}`);
        }
    }

},

But image.onload is not triggered and in console I see some error message: https://i.sstatic.net/Y7LMS.jpg

What is wrong ?

Kenneth · Accepted Answer · 2019-08-05 01:00:55Z

1

Try to watch your avatarFiles model, then read file using FileReader.

example codes:

watch:{
   avatarFiles(file){
          var image = new FileReader();
          image.onload = () => {
           console.log(`the image dimensions are ${image.width}x${image.height}`);
          }
      }

    }

edited Aug 5, 2019 at 1:00

answered Aug 2, 2019 at 13:00

Kenneth

3,0134 gold badges26 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Petro Gromovo Over a year ago

Please, look at MODIFIED

Kenneth Over a year ago

I update my codes above. I have mistaken in naming the variable in this part ${img.width}x${img.height} it should be ${image.width}x${image.height}

Petro Gromovo Over a year ago

I have different issue actually : code inside of image.onload is not triggered at all.

Petro Gromovo Over a year ago

Kenneth, also are in your code file and image 2 different variables ? Is it correct. I suppose that must be 1 var ?

Kenneth Over a year ago

Hopes it will help stackoverflow.com/questions/49004162/…

|

Collectives™ on Stack Overflow

Get width/height of uploaded by vue-upload-component image

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related