首页 > 其他分享 >antd upload组件缩略图自定义

antd upload组件缩略图自定义

时间:2024-02-03 17:55:22浏览次数:32  
标签:自定义 缩略图 样式 upload 组件 antd

antd组件的缩略图使用 img标签即可实现,我们这里有一个3D文件显示2D缩略图的需求,而这个缩略图是后台从接口返回的,所以需要自定义缩略图。

 这里的imageUrl就是你要的缩略图

用到了官网案例的将图片转为base64,具体的方法看官网。

在这里还有最最重要的一个点就是得控制它的样式,不控制样式的话会有Bug.

 

样式如下。这里根据自己的实际情况进行调整即可,有缩略图的情况,缩略图移除的情况。

 

总结:就是使用Img标签实现一个傻瓜式的预览图。

 

标签:自定义,缩略图,样式,upload,组件,antd
From: https://www.cnblogs.com/yaoyu7/p/18005012

相关文章

  • 自定义一个QAbstractItemView控件
    本文是模仿某些软件里的控件样式。在组合框里选择具有两级结构的数据,比如选某省->某市类似的数据。下述代码在VS2015和Qt5.9中测试通过。其运行效果如图。为了展示更多的功能,我还特地实现了滚动条的功能:头文件:classMItemView:publicQAbstractItemView{Q_OBJECTpub......
  • react antd的Table中,如何动态的改变表格数据
    在ReactAntd中,如果您改变了Table组件的数据源(dataSource),Table会自动重新渲染以反映新的数据。因此,只要您在状态或props中正确更新数据源,Table就会自动更新。以下是一个示例代码片段,展示如何使用React状态(state)和按钮来更改数据源并更新Table组件:importReact,{useState}fr......
  • 注册表监控工具可以近乎实时地监控注册表更改情况,让您不会错过任何问题。通过可自定义
    注册表监控工具可以近乎实时地监控注册表更改情况,让您不会错过任何问题。通过可自定义通知系统,您可以更轻松地及时了解用户操作或软件安装所引起的注册表更改。会在更改发生的当下显示更改(并让您进行检查和分析),而不是按特定间隔汇总活动数据,它还提供逐行精细数据,以更准确地查看注......
  • el-upload 跟Form表单一起提交
     vue el-upload上传<el-col:span="20"><el-form-item:label="$t('message.common.file')"prop="uploadFileList"el-uploadclass="upload-demo"dragname="uploadFile'ref="upload"......
  • (12)动态生成菜单及绑定自定义事件
    varAddCollctMenus:ArrayOfTMenuItem;//动态菜单      procedureTForm1.Button5Click(Sender:TObject);Vari,AddCollctMenuCount:Integer;BeginAddCollctMenuCount:=Length(AddCollctMenus)-1;Fori:=0ToAddCollctMenuCountDo......
  • OpenWrt之自定义Hostname
    OpenWrt之自定义Hostname找到对应的代码,在feeds/./luci/modules/luci-lua-runtime/luasrc/sys.lua中,有cur:foreach("dhcp","dnsmasq",function(s)ifs.leasefileandfs.access(s.leasefile)then......
  • TP5框架 之自定义标签
    一、创建控制器<?phpnamespaceapp\common\taglib;usethink\auth\Auth;usethink\template\TagLib;classMyTagextendsTagLib{protected$tags=['auth'=>['attr'=>'rule','close'=>1......
  • OpenWrt之自定义Firmware Version
    OpenWrt之自定义FirmwareVersion首先,找到显示FirmwareVersion的代码,在/usr/lib/lua/luci/version.lua中:root@OpenWrt:/usr/lib/lua/luci#catversion.lualocalpcall,dofile,_G=pcall,dofile,_Gmodule"luci.version"ifpcall(dofile,"/etc/openwrt_rele......
  • react antd 组件取值的方法
    在React中使用AntDesign(antd)组件,可以通过不同的方式获取组件的值,具体取决于所使用的AntDesign组件和其相关的API。一般来说,大部分AntDesign组件都有value属性或onChange事件,可用于获取或监听组件的值。以下是几个常见的AntDesign组件的取值方法示例:1、Input输入框组件:......
  • 如何创建自定义启动器
    对于要自定义启动器,我们首先分析下此依赖结构,随后再创建maven项目就拿SpringBoot起步依赖来说。1.首先需要创建一个父工程如名称aliyun-parentd,编写pom.xml文件中的内容(1).修改打包方式为pom(2).继承springboot起步依赖名称是spring-boot-parent-starter2.后面需要创建你所......