如何隐藏Ant Design Upload组件的已上传文件列表?设置showUploadList无效
解决Ant Design Upload组件上传列表无法隐藏的问题
嘿,我一眼就瞅出问题所在啦!你代码里的showUploadList="false"用了字符串类型的"false",但Ant Design的Upload组件中showUploadList是布尔类型的属性——在JSX里,字符串"false"会被解析为真值,所以组件还是会乖乖显示上传列表,根本没把你的"false"当回事儿😅。
修正方案很简单:
把字符串形式的"false"改成布尔值false,并且用大括号{}包裹(JSX中传递非字符串类型的属性必须用大括号)。另外你的multiple="true"也建议统一改成布尔值写法,保持代码规范。
修正后的完整代码:
<Upload action={`${url}api/v1/chat/messages/${chatID}`} name="billig" headers={{ Authorization: `Token ${token}` }} onChange={this.onChange} fileList={this.state.fileList} multiple={true} accept=".png,.jpeg" showUploadList={false} // 这里改成布尔值false,用大括号包裹 > 点击上传图片 {/* 这里可以保留你原有的文本,或者换成按钮元素 */} </Upload>
额外说明:
如果你用了受控模式(像你这样手动维护fileList),只要确保showUploadList={false}是布尔值,就不会再显示上传后的文件名列表了。如果还有问题,可以检查一下有没有其他自定义样式意外显示了列表,不过大概率就是布尔值传递错误的问题~
内容的提问来源于stack exchange,提问作者Mositafan




