基于element封装一个公共的限制图片宽高的方法

最新推荐文章于 2022-10-26 08:52:44 发布

HainesFreeman

最新推荐文章于 2022-10-26 08:52:44 发布

阅读量144

点赞数

分类专栏：业务

本文链接：https://blog.csdn.net/weixin_41829196/article/details/108399170

版权

业务专栏收录该内容

67 篇文章 0 订阅

订阅专栏

utils文件里面增加：

/**
 * 用于图片上传时校验图片的宽高
 * @param file file对象
 * @param width 规定的图片宽度
 * @param height 规定的图片高度
 */
export function imgSize(context,file, width, height) {
  let ruleWidth = width
  let ruleHeight = height
  const isSize =  new Promise((resolve, reject) => {
    let url = window.URL || window.webkitURL
    let img = new Image()
    img.onload = function () {
      // 图片比例校验
      let valid = img.width === ruleWidth && img.height === ruleHeight
      console.log(valid,'valid...')
      valid ? resolve() : reject(new Error('error..'))
    }
    img.src = url.createObjectURL(file)
  }).then(
    () => {
      return file
    },
    () => {
      context.$message.error({
        message: `上传文件的图片大小不符合标准,宽需要为${ruleWidth}px，高需要为${ruleHeight}px`,
        btn: false
      })
      return Promise.reject(new Error('error..'))
    }
  )
  return isSize
}

使用：

import { imgSize } from '@utils/common'


     // 上传前限制
    beforeUpload(file) {
      console.log(file,'file...')
      const isSize = imgSize(this, file, 150, 150)
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLimit = file.size / 1024  <= 500
      !isJPG && this.$message.error('上传的图片接受JPG，PNG格式')
      !isLimit && this.$message.error('上传的图片大小不能超过 500KB!')
      return isJPG && isLimit && isSize
    },