element上传图片如何获取图片的宽高

html如下：

 <el-upload action="https://jsonplaceholder.typicode.com/posts/" :before-upload="beforeUp"
            list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
         <i class="el-icon-plus"></i>
 </el-upload>
 <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
 </el-dialog>

js如下：

new Vue({
            el: '#page',
            data: function () {
                return {
                    dialogImageUrl: '',
                    dialogVisible: false
                }
            },
            methods: {
                handleRemove(file, fileList) {
                    console.log(file, fileList);
                },
                handlePictureCardPreview(file) {
                    this.dialogImageUrl = file.url;
                    this.dialogVisible = true;
                },
                beforeUp(file) {
                
                    var reader = new FileReader();
                    reader.onload = function (event) {
                        var txt = event.target.result;
                        var img = document.createElement("img");
                        img.src = txt;
                        img.onload = function () {
                            console.log(img.width);
                            console.log(img.height);
                        }
                    };
                    reader.readAsDataURL(file);
                }
            }
        })

上传图片后可以打印出图片的宽高