element upload限制图片上传尺寸大小

  1. 首先使用 Upload 上传组件
    在这里插入图片描述

  2. 使用 before-upload

    before-upload:上传文件之前的钩子,参数为上传的文件,若返回 false 或者返回 Promise 且被 reject,则停止上传
    

    在这里插入图片描述

  3. 具体代码

		// 图片校验 大小
        async beforeAvatarUpload(file) {
            let res = await this.validImageSize(file, 800, 800)
            if(!res){
                this.$message.error('图片尺寸只能为 800*800')
                return res
            }
      	},

		/**
		   * @description: 图片尺寸校验
		   * @param {Object}} file 文件对象
		   * @param {String} imgWidth 图片校验宽度 
		   * @param {String} imgHeight 图片校验高度 
		   * @return {Boolean} true:校验通过  false:校验不通过
		*/
		  // 图片尺寸校验
		  async validImageSize(file, imgWidth, imgHeight) {
		    let img = new Image()
		    img.src = URL.createObjectURL(file)
		    let { w, h } = await new Promise((resolve, reject) => {
		      img.onload = () => {
		        let { width: w, height: h } = img;
		        resolve({ w, h })
		      }
		    })
		    if (w * imgHeight !== imgWidth * h) {
		      return false
		    }
		    return true
		  }

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3.0 Element Upload 多图上传功能是一种非常方便的图片上传方式,可以通过简单的操作实现多张图片的批量上传,提高了用户的使用体验和工作效率。这种功能的实现需要依靠 Vue3.0 框架和 Element UI 组件库的支持。 首先,需要在 Vue3.0 项目中引入 Element UI 组件库,然后创建一个 Upload 组件实例,并设置相关属性,例如 action 属性表示上传地址、name 属性表示上传文件名、limit 属性表示上传文件大小限制、before-upload 属性表示上传前的校验等属性,然后在组件中添加一个 file-list 属性用来存储上传文件列表,以便在上传过程中监测文件上传进度和状态。 其次,需要在 Upload 组件中添加一个模板,用来定义上传文件列表和上传按钮等元素,通过对列表和按钮样式的设置,实现更满意的样式效果。在上传按钮的事件处理函数中,将上传文件列表传递给服务端,并监听上传进度和状态变化,通过回调函数的方式更新上传状态和提示信息。 最后,在 Vue3.0 项目中添加一些必要的插件和配置项,例如 Axios 库用于实现文件上传MIME 类型设置、CORS 跨域请求设置等等,以满足上传功能的需求。同时,要注意安全性问题,例如对上传文件类型的限制、对上传文件大小限制、对上传地址的设置等方面进行适当的处理。 综上所述,Vue3.0 Element Upload 多图上传功能的实现需要依靠 Vue3.0 框架和 Element UI 组件库的支持,通过设置相关属性、添加模板、绑定事件等方式实现。开发者需要注意安全性问题,并采用适当的插件和配置项,以便满足上传功能的需求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值