# 文件上传
用于将本地的图片或文件上传至服务器，并在上传过程中展示预览图和上传进度。
# 概念说明
# 属性
组件通用属性请参见组件通用说明。
# 主要属性
- 值：当前的文件列表。
- 上传的地址：文件上传的URL地址，如/upload。
- 上传的文件字段名：默认file，支持自定义，后端通过该字段获取文件。
- 支持上传的文件类型：支持对上传的文件类型进行限制，格式为“.后缀名”，如“.jpeg”表示仅支持上传jpeg格式的文件。多个文件类型时需使用英文逗号隔开，如“.jpeg,.png,.gif”表示仅支持上传jpeg、png、gif格式的文件。若为空值，则支持上传所有类型的文件。
- 请求headers：请求头。
- 设置cookie值：通过设置 withCredentials 为 true 获得的第三方 cookies，将会依旧享受同源策略。
- 多文件上传：开启后可上传多个文件，默认关闭，多文件可设置数量上限。
- 一次性上传多文件：开启后支持一次性上传多个文件。
- 是否开启图片裁剪：开启后支持对选择的图片进行裁剪后上传。
- 附加数据：补充描述。
- 列表数量上限：列表数量上限，默认为999。
- 最大文件大小：可上传的最大文件大小。默认50MB；如果为数字，则表示单位为字节；如果为字符串，可以添加以下单位
kB、MB、GB。 - 列表类型：列表的展示类型，支持使用文本、图片和卡片。
- URL字段名：请求返回的URL字段名。
- 是否自动上传：开启后选择文件后会自动上传，默认开启。
- 是否可以拖拽：开启后支持拖拽上传文件，默认关闭。
- 是否显示文件列表：开启后上传多个文件时，会显示文件列表，默认开启。
- 转换器：支持使用JSON或URL字符串。
- 只读：正常显示，但禁止选择或输入。
- 禁用：置灰显示，且禁止任何交互（焦点、点击、选择、输入等）。
- 展示方式：支持行内展示或块级换行展示。
- 上传提示信息：在上传组件下方展示一些提示信息，如上传的数量、大小等，默认为null。
- 出错信息：是否展示上传时的出错信息，如超出数量、大小。
- 拖拽描述：拖拽位置的文字指引。
- 文件校验：文件校验函数，可自定义校验规则，入文件名称包含特殊字符等，返回string类型的出错信息。
- 文件访问策略：支持任何人可访问和用户登录后可访问两种方式。
- 文件有效期：支持配置文件自动清理，开启后可自定义上传后有效天数。
- 上传后有效天数：开启文件有效期开关后显示，可配置文件自动清理的时间。
# 事件
文件上传不支持鼠标事件
- 上传前：上传前触发
| Param | Type | Description |
|---|---|---|
| $event | object | 自定义事件对象 |
| $event.file | File | 待上传的文件 |
| $event.preventDefault | Function | 阻止上传流程 |
- 进度改变时：发送进度改变时触发，在上传进度条时使用
| Param | Type | Description |
|---|---|---|
| $event | object | 自定义事件对象 |
| $event.data | object | 进度相关信息 |
- 文件数量超额： 文件数量超额时触发
| Param | Type | Description |
|---|---|---|
| $event | object | 自定义事件对象 |
| $event.xml | string | 服务器回传信息 |
- 文件大小超额：文件大小超额时触发
| Param | Type | Description |
|---|---|---|
| $event | object | 自定义事件对象 |
| $event.xml | string | 服务器回传信息 |
- 上传成功时：上传成功时触发
| Param | Type | Description |
|---|---|---|
| $event | object | 自定义事件对象 |
| $event.data | object | 服务器回传信息对象 |
| $event.file | object | 上传文件信息，不包含文件主体内容 |
- 上传错误时：上传报错时触发
| Param | Type | Description |
|---|---|---|
| $event | object | 自定义事件对象 |
| $event.name | string | 错误名 |
| $event.message | string | 错误描述 |
| $event.extensions | string | 限制类型 |
| $event.maxSize | number | 限制大小 |
| $event.size | number | 当前大小 |
- 删除时：点击删除按钮时触发
| Param | Type | Description |
|---|---|---|
| $event | object | 自定义事件对象 |
| $event.value | object | 当前展示项的数据信息 |
| $event.item | object | 删除项的数据信息 |
| $event.index | number | 删除项在数据列表中的索引 |
# 样式
组件通用样式请参见组件通用说明。
# 主题样式
- list-margin-top：文件上传列表项顶部外间距，如 1px。默认值6px。
- item-space：文件上传列表项之间的间距，如 1px。默认值2px。
- item-padding：文件上传列表项的内间距，如 1px。默认值4px。
- item-line-height：文件上传列表项的行高，如 1px。默认值 1.8。
- item-border-radius：文件上传列表项的圆角，如 1px。默认值4px。
- item-background：文件上传列表项背景色，如 #223325。默认值transparent。
- item-background-hover：文件上传列表项背景色(hover状态) ，如 #223325。默认值#f5f5f5。
- item-icon-color：文件上传列表项图标颜色，如 #223325。默认值#999。
- link-color：文件上传列表项链接文本颜色，如 #223325。默认值inherit。
- link-color-hover：文件上传列表项链接文本颜色(hover状态)，如 #223325。默认值#337EFF。
- card-border-radius：卡片式文件上传按钮的圆角，如 1px。默认值4px。
- card-space：卡片式文件上传文件项之间的间距，如 1px。默认值8px。
- mask-background：卡片式文件上传遮罩层颜色，如 #223325。默认值rgba(0, 0, 0, 0.6)。
# 使用提示
如果实体中字段需要保存文件或图片，请将数据类型设置为Text（长文本）。 若选择单文件上传，每次上传会自动覆盖上一次上传的文件，仅保留最新上传的文件。
文件上传支持三种样式展示：
- 单个文件按钮
- 单文件卡片
- 多图片按钮
# 示例
# 如何去掉已上传文件的删除图标
# 问题描述
需要展示已上传的文件附件，支持查看且不支持删除。
# 解决方案
选择文件上传组件，打开属性中只读开关。
打开只读开关后，该文件上传组件不可见，需通过其他文件上传组件或调用组件内置逻辑进行文件上传。
发布后展示，已上传的组件仅会显示文件名链接，支持查看且不支持删除。
