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

骑猪看日落 2022-12-17 11:59 996阅读 0赞

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);
                    }
                }
            })

![20201023165142698.png][]

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

[20201023165142698.png]: /images/20221122/134b99c876af40dbb5f9c1891275581a.png