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

CaixK
  • 499

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

 <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
  }

回复
阅读 577
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 周年「问答」打卡 ,欢迎正在阅读的你也加入。
宣传栏