首页 > 其他分享 >ant-design上传组件方法beforeUpload返回false或promise.reject仍然失效

ant-design上传组件方法beforeUpload返回false或promise.reject仍然失效

时间:2022-08-26 11:25:10浏览次数:125  
标签:false fileList ant design 更新 beforeUpload 上传

问题描述:在使用ant design框架的Upload上传组件时,相信很多人做过上传文件的格式、大小、数量、或其他依赖条件等的限制,这些限制一般都是需要在beforeUpload方法中进行处理的, 当上传文件不符合预期时就需要阻止上传。如下图ant design官网描述的,可以有两种方式进行阻止,但是,有些时候这两种方式却失效了(阻止不了后续的文件上传)!

 

问题分析:其实,按照ant-design官网示例操作阻止文件上传是有效的,而造成上述问题的原因,很多时候(不敢说绝对)是发生在fileList的处理上。

如下实例:

 

在onChange方法中,往往需要更新fileList,因为官网说 “fileList 受控时,上传不在列表中的文件不会触发 onChange 后续的 status 更新事件”(意思就是 fileList不更新,onChange后续的status就不会更新,文件就一直停留在uploading状态),为了保证正常的上传流程,fileList还是需要更新的。

但是,阻止上传流程中,即 beforeUpload方法返回false之后,仍然会调用onChange方法。此时,fileList随意更新就会导致文件的状态进入到下一个status,也就意味着上传流程会进入到下一个阶段,这是不符合拦截上传的逻辑的。

所以,在更新fileList时加了个判断逻辑,使之通过了beforeUpload限制才能更新。

 

解决方案:在更新fileList 时加了个判断逻辑,这样就可以解决 beforeUpload方法返回 false 或 Promise.reject 之后还进入到上传下一个阶段的问题了。

 

 

搜索

复制

标签:false,fileList,ant,design,更新,beforeUpload,上传
From: https://www.cnblogs.com/bky419/p/16626726.html

相关文章