vue+Element 或者vue+iView 上传图片验证分辨率

最新推荐文章于 2024-06-13 16:17:10 发布

小楠楠哎呀

最新推荐文章于 2024-06-13 16:17:10 发布

阅读量1.1k

点赞数

文章标签： vue.js view design javascript

本文链接：https://blog.csdn.net/weixin_46579551/article/details/129816987

版权

在上传图片时，可以使用`before-upload`钩子进行分辨率检查。定义`beforeUpload`方法，创建一个新的Image对象加载文件，然后通过onload事件判断图片宽高。如果宽度不在980像素内或高度不在1180像素内，显示错误消息并拒绝上传。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

如果想在上传图片验证分辨率就放在before-upload这个钩子调用

在这里插入图片描述

具体方法先定义:before-upload=“beforeUpload”

在这里插入图片描述

然后在methos调用这个方法

例如我这边设置的宽度不能大于或者小于980像素高度不能大于1180和小于1180像素

beforeUpload(file) {

   const _URL = window.URL || window.webkitURL

 const isSize = new Promise((resolve, reject) => {
            const img = new Image()
            img.onload = function() {
                this.width > 980 || this.width < 980 || this.height > 1180 || this.height < 1180 ? reject() : resolve()
            }
            img.src = _URL.createObjectURL(file)
        }).then(
            () => {
                return file
            },
            () => {
                this.$Message.error('上传失败：请上传尺寸为980*1180px的图片！')
                return Promise.reject()
            }
        )
        return isSize
    },