el-upload限制图片尺寸

吴冬雪~

已于 2023-09-17 14:32:31 修改

阅读量333

点赞数

分类专栏： Vue element-ui 文章标签： vue.js elementui

于 2023-03-21 17:47:16 首次发布

本文链接：https://blog.csdn.net/qq_37548296/article/details/129693808

版权

Vue 同时被 2 个专栏收录

34 篇文章 4 订阅

订阅专栏

element-ui

18 篇文章 0 订阅

订阅专栏


// 计算图片尺寸
export function asyncImgChecked(file, width, height) {
  return new Promise((resolve) => {
    const reader = new FileReader()
    reader.readAsDataURL(file.raw) // 必须用file.raw
    reader.onload = () => { // 让页面中的img标签的src指向读取的路径
      const img = new Image()
      img.src = reader.result
      // console.log(`1当前文件尺寸大小：${img.width}×${img.height}`)
      if (img.complete) { // 如果存在浏览器缓存中
        if (img.width < width || img.height < height) {
          resolve(false)
        } else {
          resolve(true)
        }
      } else {
        img.onload = () => {
          if (img.width < width || img.height < height) {
            resolve(false)
          } else {
            resolve(true)
          }
        }
      }
    }
  })
}