图片上传
未升级到新版信息架构的组织,请 点此查看 使用手册
1. 适用场景
图片上传可以用来记录当前提交表单所需要的图片相关证明,例如上传身份证、报销的发票等。
组件属性以及使用和示例请 点击此处 查看
2. 基础功能
设置图片上传组件的格式和显示效果
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639032523992-c4eada8c-d265-4f88-a1db-daddd972e4ff.png)
2.1 上传类型
路径:点击组件 >> 右侧属性 >> 上传详情设置
分为: 点击、卡片、拖拽
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639032647822-e4fa327e-4b9c-4333-8b0c-4a68c03d81b6.png)
2.1.1 点击
展示为系统自带格式,效果如图:
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639032556570-690e9372-024a-45e1-a1bd-b2356cb906ea.png)
2.1.2 卡片
显示的是个正方形的框架,效果如图:
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639032612309-c49750f4-b9af-44a5-b729-91e65872b3b5.png)
2.1.3 拖拽
可直接从电脑桌面把图片拖到虚线框内,效果如图:
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639032677660-3e45092b-87db-4611-8658-328aa0157b30.png)
2.1.4 图片上传大小
超大图片,无需担心,一键快速上传,图片上传的内容大小,从以前的 20 M 提升至 50 M↑
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1621596608325-bdb6232b-a8a4-4b88-8126-54c7bdeb69df.png)
2.2 图片显示
设置上传的图片通过什么方式显示出来
分为:文字、图文
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639032741559-a8e1ed44-4015-4e75-996b-281b06e6f374.png)
2.2.1 文字
只展示图片名,不会展示图片,需要点击后方小眼睛才可以看见图片详情,效果如图:
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639032868816-4558f594-a940-4334-98e3-8bb9e9783b73.png)
2.2.2 图文
展示图片名和图片详情,效果如图:
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639032902149-fbfe3c8c-9691-4495-9d95-13e6a6c6fe37.png)
2.3 修改按钮名称
如:需要提交表单的成员上传身份证就可以把按钮名称修改为身份证,效果如图:
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639032957102-6bac523a-836f-44b2-848e-fdfe45a06585.png)
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639033005834-ebadfce5-9b10-444d-8105-71653dcc1672.png)
2.4 外观颜色
可以自定义按钮颜色,系统默认为 「primary」。
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639033034659-0c73a816-9fa4-425f-9470-d9b38ff4e9c3.png)
2.4.1 primary (主要)
图片上传按钮变成了蓝色背景,白色文字。
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1623808321367-740ec368-4aba-4fdd-b2de-3e4db0f9bb3a.png)
2.4.2 second (次要)
图片上传按钮变成了蓝色边框,白色背景色。
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1623808370426-0c4f9bc2-1a89-46ad-a060-9a11655467ff.png)
2.4.3 normal (普通)
图片上传变成了灰色边框,灰色文字。
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1623808448966-3f035a1a-ed3e-4e7b-9093-c1d7d98452df.png)
2.5 多选
关闭了多选,一次就只能上传一张图片,开启了一次可上传多张图片。
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639033094012-20b5d51e-70c6-4386-b050-a27f181a0212.png)
注:开启了多选同时多选下面的最大上传文件个数也需要同步开启
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639033134754-8e3e2621-ccfb-47df-a393-646019624c39.png)
2.6 上传图片类型
自定义图片上传的文件类型,系统默认为 「image/*」,表示所有图片都可上传;
注:目前上传类型为拖拽时,不会限制上传的图片格式
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639033171812-6d884518-e60b-4fe1-bc9a-ddae8b7bf5c7.png)
注: 如果只想支持固定的图片格式,可以输入具体的图片类型, 以逗号隔开, 例如只想支持 .jpg或 .png 格式的。效果如图:
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639033237371-38e8b983-8ba0-4731-a155-295f16b6b6c7.png)
3. 常见问题
3.1 怎么把图片上传设置为只能实时拍照上传呢?
开启图片组件仅允许拍照上传即可。
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1643442990868-26785617-2795-4028-abc7-394e3d40aeef.png)
3.2 如何导出图片文件?
宜搭为了更好的优化宜搭使用手册内容和质量,占用您3-5分钟时间,辛苦填写一下文档反馈问卷。文档反馈问卷是匿名提交,同时问卷信息仅用于宜搭文档体验反馈收集,感谢您对宜搭的支持!
--------获取宜搭最新信息,欢迎关注我们--------
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/jpeg/1632807780139-91cbcd43-8c42-44f3-9b2d-0d8b799ab7ea.jpeg)