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}},即可实现预览图标的隐藏,效果如下


目录
相关文章
|
2月前
|
JavaScript 前端开发
layui用layer.open打开子页面并获取子页面的ueditor富文本编辑器的内容
该内容描述了一个Web应用的交互流程,其中父页面通过调用子页面的JavaScript函数来获取富文本编辑器的内容。子页面包含一个富文本编辑器和一个`callbackdata`函数,用于返回编辑器的文本内容。父页面使用`layer.open`打开子页面作为弹窗,并在用户点击提交时,访问子页面的`callbackdata`获取编辑器内容,同时检查其他表单字段,如类型、标题等是否为空,以确保数据完整。
148 0
|
存储 缓存 前端开发
Antd Upload + React-Cropper 实现图片自定义区域剪裁并上传功能
通过Upload组件结合react-Cropper实现图片的裁剪上传组件封装,剖析antd-img-crop源码实现的逻辑,对自己封装的组件进行进一步优化,改造!
4269 0
Antd Upload + React-Cropper 实现图片自定义区域剪裁并上传功能
|
2天前
|
JavaScript
vue 指定区域可拖拽的限定拖拽区域的div(如仅弹窗标题可拖拽的弹窗)
vue 指定区域可拖拽的限定拖拽区域的div(如仅弹窗标题可拖拽的弹窗)
5 0
|
3天前
|
数据安全/隐私保护
Element UI 密码输入框--可切换显示隐藏,自定义图标
Element UI 密码输入框--可切换显示隐藏,自定义图标
7 0
|
13天前
|
JavaScript
vue点击按钮复制文字到粘贴板
vue点击按钮复制文字到粘贴板
13 0
|
16天前
|
JavaScript 容器
JS图表制作及点击按钮切换图表样式
JS图表制作及点击按钮切换图表样式
14 0
vue3+element plus图片预览点击按钮直接显示图片的预览形式
vue3+element plus图片预览点击按钮直接显示图片的预览形式
|
2月前
|
前端开发 JavaScript 程序员
avue中怎样隐藏新增和编辑的按钮
avue中怎样隐藏新增和编辑的按钮
|
2月前
|
JavaScript API
Element Plus组件库中的input组件如何点击查看按钮时不可编辑,点击编辑时可编辑使用setup
Element Plus组件库中的input组件如何点击查看按钮时不可编辑,点击编辑时可编辑使用setup
70 0
|
11月前
|
前端开发
上传图片组件的悬停显示删除等操作遮罩层
上传图片组件的悬停显示删除等操作遮罩层