el-upload 限制图片上传大小

<el-upload
          class="avatar-uploader"
          accept="image/png,image/jpg,image/jpeg"
          :action="url"
          :limit="1"
          :show-file-list="false"
          :before-upload="beforeImgUpload"
          :on-success="handleAvatarSuccess">
          <el-image
            style="width: 178px;height: 178px;"
            v-if="form.banImageUrl" :src="form.banImageUrl"
            :fit="'contain'"></el-image>
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          <div slot="tip" class="el-upload__tip">只能上传 1920 * 560 的jpg/png文件，且不超过			10M</div>
</el-upload>


<script>
	export default {
		data: {
			return {
				validWidth: 1920,
				validHeight: 560
			}
		},
		methods: {
			beforeImgUpload (file) {
        	const isLt2M = file.size / 1024 / 1024 < 20
       		 if (!isLt2M) {
          	this.$message.error('上传头像图片大小不能超过 10MB!')
         	 return false
       		 }
       		 // 限制图片的大小
        	if (this.validWidth && this.validHeight) {
          		return this.valWidthAndHeight(file)
        	} else {
         		 return isLt2M
       		 }
	      },
      // 验证图片宽高
      valWidthAndHeight (file) {
        let _this = this
        return new Promise(function (resolve, reject) {
          let width = _this.validWidth// 图片宽度
          let height = _this.validHeight// 图片高度
          let _URL = window.URL || window.webkitURL
          let image = new Image()
          image.src = _URL.createObjectURL(file)
          image.onload = function () {
            let valid = image.width == width && image.height == height
            valid ? resolve() : reject()
          }
        }).then(
          () => {
            return file
          },
          () => {
            this.$message.error('上传图片尺寸不符合,只能是' + _this.validWidth + '*' + _this.validHeight + '!')
            return Promise.reject()
          }
        )
      },
}
	}
</script>