elementUI上传过程中限制尺寸

最新推荐文章于 2023-12-11 14:46:30 发布

WX_安琪拉打野怪

最新推荐文章于 2023-12-11 14:46:30 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： js vue

本文链接：https://blog.youkuaiyun.com/weixin_42011096/article/details/93619191

js 同时被 2 个专栏收录

22 篇文章

订阅专栏

vue

10 篇文章

订阅专栏

本文介绍了一种在图片上传前进行尺寸验证的方法，通过Promise处理图片加载状态，确保上传的图片符合220*220像素的要求。代码示例展示了如何在Vue中实现这一功能。

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

要点:

1.上传之前的的钩子函数

2.利用promise返回图片加载的状态

代码如下:

beforeAvatarUpload (res, file) {
      const isSize = new Promise((resolve, reject) => {
        let width = 220
        let height = 220
        let _URL = window.URL || window.webkitURL
        let img = new Image()
        img.onload = function () {
          let valid = img.width === width && img.height === height
          // eslint-disable-next-line prefer-promise-reject-errors
          valid ? resolve() : reject()
        }
        img.src = _URL.createObjectURL(res)
      }).then(() => {
        return res
      }, () => {
        this.$message.error('上传的图片必须是等于或大于220*220!')
        // eslint-disable-next-line prefer-promise-reject-errors
        return Promise.reject()
      })
      return isSize
},