基本定义

概述

当需要上传一个或一些文件时。 当需要展现上传的进度时。 当需要使用拖拽交互时。

构成元素

1. 标题: 固定文案-上传文件
2. 上传按钮: 图标+文案
3. 下载模版按钮: 可配置句前文案, 但是“下载模版”文字按钮始终跟在句末
4. 备注信息: 对上传文件的信息进行描述

类型

文件单个上传

分为直接上传和暂存上传两种模式

1. 错误提示: 对文件的错误信息进行描述
2. 删除按钮: 删除已上传文件
3. 上传按钮: 按钮点击后上传至系统 (临时文件暂存功能)

文件多个上传

上传文件小于等于5个时, 直接展示出来 上传文件大于5个时, 统一收起, 点击触发popover内展示

1. 错误提示: 对文件的错误信息进行描述
2. 备注信息: 已上传文件合计显示
3. 多文件展示: 只显示上传数量, 点击“查看”按钮, popover内查看详情

图片单个上传

分为直接上传和暂存上传两种模式

1. 上传后区域: 图片展示区
2. 暂存按钮: 点击上传图片至系统 (临时图片暂存功能)

图片多个上传

1. 标题: 固定文案-上传多个图片
2. 上传后区域: 图片展示区
3. 选择图片按钮: 上传图片功能

相关组件对比

暂无

用法

什么时候用

• 你需要从本地上传一个/多个文件、图片至系统内
• 你需要知道上传后的状态
• 你需要区分不同文件格式的样式

什么时候不用

你需要直接从其他系统内引用至现有系

最佳实践

行为

出现方式

Hover、点击

出现位置

上传后文件始终出现在按钮下方, 上传后图片始终出现在按钮左方

生命周期

上传文件、图片后关闭

全局变化

容器的规则

此组件以Z轴浮层形式出现，组件会覆盖屏幕上的内容，并始终出现在最顶层