el-upload上传校验格式、大小的实现方式

上传组件 

 <el-upload
      :action="uploadUrl"
      :headers="headers"
      list-type="picture"
      :multiple="false"
      :show-file-list="showFileList"
      :file-list="fileList"
      :on-remove="handleRemove"
      :on-success="handleUploadSuccess"
      :on-preview="handlePreview"
      :before-upload="beforeAvatarUpload"
    >
      <el-button  type="primary">点击上传</el-button>
    </el-upload>

上传前的校验钩子函数

 beforeAvatarUpload(file) {
        console.log(file.type)

        const isLt2M = file.size / 1024 / 1024 < 10
        const isJPG =
          file.type === 'image/jpeg' ||
          file.type === 'image/png' ||
          file.type === 'image/jpg'

        if (!isJPG) {
          this.$message.error('上传图片只能是 JPG/PNG 格式!')
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 10MB!')
        }
        return isLt2M && isJPG
}