el-upload限制文件大小(图片尺寸)

1. 在el-upload控件中加入on-change方法:

<el-upload id="file"
  ref="upload"
  slot="append"
  :action="file.action"
  :with-credentials="true"
  name="file"
  :data="file.data"
  :show-file-list="false"
  accept=".xls,.xlsx,.csv"
  :disabled="isDisabled"
  :auto-upload="false"
  :on-change="handleChangeFile">
  <el-button class="file_upload"
    type="default"></el-button>
  <label for="file"
    class="file-btn h-icon-folder"></label>
</el-upload>

2. 在on-change方法中处理:

handleChangeFile (file, fileList) {
  this.isDisabled = false
  if (!file) return
  var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
  const isLt2M = file.size / 1024 / 1024 < 50
  if (testmsg !== 'xls' && testmsg !== 'xlsx' && testmsg !== 'csv') {
    this.$refs.upload.clearFiles()
    this.$message({
      message: '上传文件只能是 .xls、.xlsx、csv格式!',
      type: 'warning'
    })
    return false
  }
  if (!isLt2M) {
    this.$refs.upload.clearFiles()
    this.$message({
      message: '上传文件大小不能超过 50MB!',
      type: 'warning'
    })
    return false
  }
  this.fileName = file.name
}

3.作为补充, 如果对图片的尺寸有限制也可以实现的(这里只做补充, 此文件中没用到):

// 说明: 这部分代码不是本项目的,扩展
onchange (file) {
  let isLt = file.size / 1024 < 200 // 判断是否小于200Kb
  if (!isLt) {
    this.$message.warning('图片大小不能超过200KB! 请重新上传')
    this.$refs.upload.clearFiles()
    this.basicForm.image = ''
    this.basicForm.imageFile = []
  } else {
    this.asyncImgChecked(file).then(data => {
      if (data) {
        this.basicForm.image = file.name
        this.basicForm.imageFile = file
      } else {
        this.basicForm.image = ''
        this.basicForm.imageFile = []
        this.$refs.upload.clearFiles()
        this.$message.warning('图片尺寸不小于64 X 64')
      }
    })
  }
},
// 计算图片尺寸
asyncImgChecked (file) {
  return new Promise((resolve) => {
    let reader = new FileReader()
    reader.readAsDataURL(file.raw) // 必须用file.raw
    reader.onload = () => { // 让页面中的img标签的src指向读取的路径
      let img = new Image()
      img.src = reader.result
      // console.log(`1当前文件尺寸大小：${img.width}×${img.height}`)
      if (img.complete) { // 如果存在浏览器缓存中
        if (img.width < 64 || img.height < 64) {
          resolve(false)
        } else {
          resolve(true)
        }
      } else {
        img.onload = () => {
          if (img.width < 64 || img.height < 64) {
            resolve(false)
          } else {
            resolve(true)
          }
        }
      }
    }
  })
}