vue3 开发选用element-plus框架el-upload上传文件的限制

最近在用vue3开发软件时候，项目选用的是element-plus框架，框架是挺好用的。开发时候没做文件限制，测试人员说要对文件做限制，不然会把乱七八糟的文件都传上去了。翻阅文档不够全，所以特此做下笔记。

常见的方法，在el-upload上增加accept属性，比如我要限制只是上传图片，如下图代码

accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PNG,.GIF,.BMP"

但是如此，只是在弹窗选择时候，筛选过滤了电脑中的对应的扩展图片，如下图所示，

用户是可以选择任意文件，然后上传其他的。所以为了代码完美，还需要再上传文件前做控制。在组件上增加属性

:before-upload="beforeAvatarUpload"

在对应方法上做控制，

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('Avatar picture must be JPG format!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }
  return true
}

如此完美解决。