element-ui上传文件规定只能上传

今天遇到一个问题，就是在elementui项目中对文件进行上传，上传的类型只能是图片格式。

一开始的想法是通过 accept=".jpg, .png, jpeg" 设置传入文件格式

<el-upload
                  class="avatar-uploader"
                  list-type="picture-card"
                  multiple
                  :file-list="item.planPictures"
                  :action="uploadImgUrl"
                  :headers="uploadHeaders"
                  accept=".jpg, .png, jpeg"
                  :on-success="
                    (res, file) => handleAvatarSuccess(res, file, item)
                  "
                  :on-remove="
                    (file, fileList) => handleRemove(file, fileList, item)
                  "
                  :before-upload="beforeAvatarUpload"
                >
                  <el-button size="small" type="file">点击上传图示</el-button>
</el-upload>

结果得到的结果是，点击上传后选择的文件只有，.jpg, .png, jpeg格式。

 然后找到以后发现如果修改文件类型，还是可以上传非类型，所以找到了:before-upload="beforeAvatarUpload"这个属性，修改挂载函数beforeAvatarUpload，

 beforeAvatarUpload(file) {
      const isLt10M = file.size / 1024 / 1024 < 10;

      var testmsg = file.name.substring(file.name.lastIndexOf('.')+1)
      const extension = testmsg === 'png'
      const extension2 = testmsg === 'jepg'
      const extension3 = testmsg === 'jpg'

      if(!extension && !extension2 && !extension3) {
        this.$message({
            message: '上传文件只能是 png、jepg、jpg格式的文件',
            type: 'warning'
        });
      }
      
      if (!isLt10M) {
        this.$message.error("上传头像图片大小不能超过 10M!");
      }
      return (extension || extension2 || extension3) && isLt10M;
    },