본문 바로가기

개발이야기/Vue - Vuetify

v-file-input 이미지 사이즈 확인

<v-file-input
    id="image"
    v-model="image"
    hide-details
    dense
    @change="imageChange()"
    accept="image/*"
></v-file-input>
export default {
    data: () => ({
        mage,
    }),
    methods: {
        imageChange: async function() {
        if(this.image){

            //이미지 파일 크기 체크
            let getImageSize = await this.getImageSize(this.image);
            console.log(getImageSize);
            /*
            * 결과 : { width: 100, height: 100 }
            */
        }
        },

        getImageSize : async function(image){
            let _URL = window.URL || window.webkitURL;
            let objectUrl = _URL.createObjectURL(image);
            return new Promise((resolve, reject) => {
                let img = new Image()
                img.onload = () => resolve({
                width : img.width,
                height : img.height
                })
                img.onerror = reject
                img.src = objectUrl
            })      
        },
    },
};