antd如何隐藏Upload组件的删除和预览图标

简介: antd如何隐藏Upload组件的删除和预览图标

antd如何隐藏Upload组件的删除和预览图标


如下所示,当Upload组件文件上传成功后,默认会出现预览和删除的图标

如果我们不想显示这两个图标,应该如何操作呢?官方文档上有如下介绍:

通过设置Upload组件的showUploadList属性下的showPreviewIcon, showRemoveIcon, showDownloadIcon,即可控制预览图标、删除图标、下载图标的展示和隐藏

比如,我要隐藏Upload的预览图标

详细代码如下:

<Upload
  action={action}
  accept={accept}
  listType="picture-card"
  maxCount={maxCount}
  multiple
  headers={{'content-type': 'multipart/form-data'}}
  beforeUpload={this.beforeUpload}
  fileList={fileList}
  onRemove={this.onRemove}
  showUploadList={{showPreviewIcon: false}}
>
  上传
</Upload>

通过设置showUploadList={{showPreviewIcon: false}},即可实现预览图标的隐藏,效果如下


目录
相关文章
ant-design Upload上传组件使用 编辑功能图片回显
ant-design Upload上传组件使用 编辑功能图片回显
1548 0
|
JavaScript 前端开发 容器
Vue antdv 下拉菜单不跟着滚动走(getPopupContainer 使用)
Vue antdv 下拉菜单不跟着滚动走(getPopupContainer 使用)
2167 0
|
前端开发
react-antd中使用Upload实现图片裁剪-上传-预览的功能
使用react中antd实现图片的上传裁剪和预览,记录一下实现过程,希望能对大家有帮助
1486 0
react-antd中使用Upload实现图片裁剪-上传-预览的功能
|
前端开发 小程序
919. 【前端】Taro.useShareAppMessage 自定义分享封面
919. 【前端】Taro.useShareAppMessage 自定义分享封面
1317 2
|
容器
Handsontable - 配置属性(下)
Handsontable - 配置属性(下)
1560 0
Handsontable - 配置属性(下)
|
存储 缓存 前端开发
Antd Upload + React-Cropper 实现图片自定义区域剪裁并上传功能
通过Upload组件结合react-Cropper实现图片的裁剪上传组件封装,剖析antd-img-crop源码实现的逻辑,对自己封装的组件进行进一步优化,改造!
5690 0
Antd Upload + React-Cropper 实现图片自定义区域剪裁并上传功能
|
JavaScript
antd树形控件遇到的一些坑
antd树形控件遇到的一些坑
|
存储 前端开发 UED
React 面包屑组件 Breadcrumb 详解
面包屑导航是现代Web应用中常见的UI元素,帮助用户了解当前位置并快速返回上级页面。本文介绍如何使用React构建面包屑组件,涵盖基本概念、实现方法及常见问题。通过函数式组件和钩子,结合React Router动态生成路径,处理嵌套路由,并确保可访问性。示例代码展示了静态和动态面包屑的实现,帮助开发者提升用户体验。
808 73
antd table合并行或者列(动态添加合并行、列)
在Ant Design的Table组件中实现行或列的合并,通过动态计算数据源中的`rowSpan`或`colSpan`属性来控制,支持对特定字段进行行或列合并,包括多选框列的合并处理。
2370 3
antd table合并行或者列(动态添加合并行、列)
|
JavaScript 前端开发
has been blocked by CORS policy: The ‘Access-Control-Allow-Origin‘ header contains multiple values ‘
has been blocked by CORS policy: The ‘Access-Control-Allow-Origin‘ header contains multiple values ‘
590 0