上传校验图片像素大小

故事背景:
服务端今天突然跑过来说线上图片压缩报 oom (内存溢出)异常, 分析得出结论是图片分辨率过高导致的, 问前端有没有办法获取分辨率做一下限制, 获取图片的宽高作为前端都知道 onload 加载成功获取 width & height即可, 但是我们通常都是赋值的 url, 但是如果是本地文件呢, 我们怎么获取图片的宽高呢?查阅相关文档找到了FileReader 这个 API, 具体使用请查看下面的链接.

前置: FileReader对象使用请查考此文: https://blog.csdn.net/weixin_44116302/article/details/91554835

// promise 转同步方法,吸收异常报错,返回统一数据格式
const awaitWrap = promise => promise
  .then(data => [null, data])
  .catch(err => [err, null])

/**
 * @desc 校验图片大小
 * @param {file} file 图片文件
 * @param {limitWidth} limitWidth 限制分辨率宽
 * @param {limitHeight} limitHeight 限制分辨率高
 * @returns Promise
 */
export const verifyImgSize = (file, limitWidth, limitHeight) => {
  return awaitWrap(new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.onload = e => {
      const img = new Image()
      img.onload = () => {
        if (img.height * img.width > limitWidth * limitHeight) {
          // eslint-disable-next-line prefer-promise-reject-errors
          reject(`请上传分辨率在${limitWidth}x${limitHeight}px范围以内的图片`)
        }
        resolve()
      }
      img.src = e.target.result
    }
    reader.readAsDataURL(file)
  }))
}
// 使用方式, 图片上传组件用的是 element的 upload
async beforeUpload(file) {
  const [err, data] = await verifyImgSize(file, 1920, 1080)
  if (err) {
    this.$message.warning(err)
    return Promise.reject(err)
  }
 }