为什么el upload上传组件使用了:before-upload还是不能阻止上传

Question

它文档写的在before-upload中返回false会阻止继续上传，但是我false之后还是触发了on-success，检查了一下感觉没啥问题啊，就是想格式大小不通过的时候停止上传

 <el-upload
  :class="menuIndex === 'subType1' ? 'is-all' : ''"
  :action="uploadFileUrl"
  list-type="picture-card"
  :on-success="handleUploadSuccess"
  :on-preview="handlePictureCardPreview"
  :on-remove="handleRemove"
  :headers="headers"
  :file-list="fileList"
  :before-upload="beforeAvatarUpload"
>
</el-upload>

  // 限制用户上传格式和大小
  const beforeAvatarUpload = (rawFile) => {
    const condition = ['image/jpg', 'image/jpeg', 'image/png']
    if (!condition.includes(rawFile.type)) {
      ElMessage.error('上传的资料只能是 JPG,PNG 格式!')
      return false
    } else if (rawFile.size / 1024 / 1024 > 5) {
      ElMessage.error('上传的资料不可以大于 5MB!')
      return false
    }
    return false
  }

Answer 1

• 想看你完整代码，正常不应该写在 methods 中吗

  methods: {
    beforeUpload(file) {
      const isJPG = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif'].includes(file.type)
      const isLtSize = file.size / 1024 < 500
      if (!isJPG) {
        this.$message.error('文件非 JPG/PNG/JPEG/GIF 格式')
        return false
      }
      if (!isLtSize) {
        this.$message.error('上传文件大于500k')
        return false
      }
      return isJPG && isLtSize
    }
  }

  已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。