Nuxt SSR return 将图像尺寸加载到服务器

Question

我正在尝试在现有 img 元素上预览个人资料照片我的问题是新图像尺寸在 img 加载函数之外变得不确定。

如何将这些尺寸传递给服务器，以便我可以正确调整 img 元素的大小？

我也尝试过使用 Vuex Store 来传递维度，但结果相同，但未定义。

我还有一个监听调整大小的函数，在用户更改 window 后，img 会正确调整大小，但我正在尝试在没有事件触发器的情况下执行此操作。即使我尝试使用 jQuery 手动触发调整大小事件，它也不会调整大小。我的印象是，在调整大小甚至刷新尺寸之前，新 img 源的尺寸在某种程度上没有正确设置？

<b-img id="profilePhoto" v-bind="profile" :src="this.photo" class="profilePhoto" @change="handleResize()"></b-img>

export default {
        data() {
            return {
                errors:{},
                profile: {},
                fileDimensions: {},
                photo: '',
                form: this.$vform({
                    id: '',
                    name: '',
                    email: '',
                    password: '',
                    role: '',
                    bio: '',
                    photo: ''
                })
            }
        }
    }

getPhoto(e) {
    let file = e.target.files[0];
    if (typeof file !== 'undefined'){
        let reader = new FileReader()
        let limit = 1024 * 1024 * 2
        if (file.size > limit) {
            return false;
        }

        reader.onloadend = (file) => {
            this.form.photo = reader.result
            this.photo = this.form.photo
        }
        reader.readAsDataURL(file)

        $("<img/>",{
            load : function(){
                // will return dimensions fine if i use alert here
                this.fileDimensions = { width:this.width, height:this.height} ;
            },
            src  : window.URL.createObjectURL(file)
        });

        // becomes undefined outside of the load functions
        var aw = this.fileDimensions.width
        var ah = this.fileDimensions.height
        var ph = $('.profile').height()
        var pw = $('.profile').width()
        console.log(this.fileDimensions.width)
        if (ah>aw){
            this.profile = { width: ph, height: 'auto'}
        } else if (aw>ah) {
            this.profile = { width: 'auto', height: ph}
        } else {
            this.profile = { width: ph+10, height: pw+10}
        }
    }
}

我希望得到尺寸，这样我就可以确定如何使用新的 src 为 img 元素设置宽度和高度属性，但是尺寸变为未定义。

Answer 1

我通过另一个 post 弄明白了。我必须做出承诺。

getDimensions(src){
    return new Promise((resolve,reject) => {
        let img = new Image()
        img.onload = () => resolve({ height: img.height, width: img.width })
        img.onerror = reject
        img.src = src
    })
},
getPhoto(e) {
    let file = e.target.files[0];
    if (typeof file !== 'undefined'){
        let reader = new FileReader()
        let limit = 1024 * 1024 * 2
        if (file.size > limit) {
            return false;
        }

        reader.onloadend = (file) => {
            this.form.photo = reader.result
            this.photo = this.form.photo
        }
        reader.readAsDataURL(file)

        this.getDimensions(URL.createObjectURL(file))
        .then((dimensions) => {
            if (process.client){
                var ah = $('.profile').height()
                var aw = $('.profile').width()
                var ph = dimensions.height
                var pw = dimensions.width

                if (ph>pw){
                    this.profile = { width: ah+10, height: 'auto'}
                } else if (pw>ph) {
                    this.profile = { width: 'auto', height: ah+10}
                } else {
                    this.profile = { width: ah+10, height: aw+10}
                }
            }
        })
    }
}

Nuxt SSR return 将图像尺寸加载到服务器

Nuxt SSR return loaded image dimensions to server

image

server-side-rendering

nuxt.js