Element UI file upload compare filetype

Question

It should only allow png, jpg, jpeg, bmp file type.

How can we do that using element ui vuejs

beforeAvatarUpload(file) {
    const isJPG = file.type === 'image/jpeg' || 'image/png';
    const isLt2M = file.size / 1024 / 1024 < 2;

    if (!isJPG) {
        this.$message.error('Avatar picture must be JPG format!');
    }

    if (!isLt2M) {
        this.$message.error('Avatar picture size can not exceed 2MB!');
    }

    return isJPG && isLt2M;
}

Does not work for me. Also it does not display me msword type in windows system. Don't know why

Please guide
Thanks

Pallamolla Sai · Accepted Answer · 2019-01-11 06:37:31Z

1

If you want to only allow jpg or png image types you can write the below code. You don't need to check the type of the image (explicitly).

 <input type="file" accept="image/jpeg || image/png">

In accept attribute whatever the types you mention those kind of images only user can upload. In above if you mention only jpeg or png user can upload specified type of image only.

If you only want jpg then you can write like this.

<input type="file" accept="image/jpeg"> //

answered Jan 11, 2019 at 6:37

Pallamolla Sai

2,5131 gold badge16 silver badges14 bronze badges

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

2 Comments

Json Over a year ago

No this is not a solution this will not stop user to check validation

Pallamolla Sai Over a year ago

I have tried it. I mentioned jpg in accept attribute and try to upload png. It worked in firefox.

Collectives™ on Stack Overflow

Element UI file upload compare filetype

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related