mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-15 09:21:13 +08:00
dd91d9660c
* Select Options等组件样式对齐4.0 * 更新测试快照 * 修改部分测试用例 * feat:4.0样式修改 * 修改checkboxes hover问题 * Feat image 4.0 (#4242) * faet: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层 * feat: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层 * faet: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层 * faet: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层 * fix: 点状步骤条样式修改 * fix: inputTree组件对齐4.0标准 * fix: textarea组件对齐4.0标准 * fix: textarea组件对齐4.0标准 * fix: inputImage组件对齐4.0标准 * fix: inputImage组件对齐4.0标准 * fix: inputImage组件对齐4.0标准 * fix: inputImage组件对齐4.0标准 * fix: image组件样式优化 * fix: image组件样式优化 * fix: image组件样式优化 * fix: image组件样式优化 Co-authored-by: qiaoganggang <qiaoganggang@baidu.com> * fix: textarea组件对齐4.0标准 (#4149) * faet: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层 * feat: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层 * faet: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层 * faet: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层 * fix: 点状步骤条样式修改 * fix: inputTree组件对齐4.0标准 * fix: inputTree组件对齐4.0标准 * fix: textarea组件对齐4.0标准 * fix: textarea组件对齐4.0标准 Co-authored-by: qiaoganggang <qiaoganggang@baidu.com> * fix: inputTree 组价对齐4.0标准 (#4148) * faet: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层 * feat: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层 * faet: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层 * faet: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层 * fix: 点状步骤条样式修改 * fix: inputTree组件对齐4.0标准 * fix: inputTree组件对齐4.0标准 * fix: inputtree组件图标颜色修改 Co-authored-by: qiaoganggang <qiaoganggang@baidu.com> * feat: 部分组件样式问题修复 (#4154) * feat: input-text 样式 * feat: input-range 样式 * feat: table 样式 1 * feat: search-box * feat: curd icon * feat: table 空状态 * feat: input-text 多选,最大宽度设置 * feat: search-box 搜索图标颜色 * feat: crud 编辑、过滤、搜索、排序 图标样式修改 * feat: 更新快照 * feat: 更新快照 2 * feat: curd fix * feat: curd edit icon fix * feat: input-password 不可见 icon 修改 * feat: input-password snapshot update * docs:完善对话框size参数说明 * feat: Log 组件支持虚拟渲染及限制最大行数 * 修复不支持 loading 问题 * 换一下名字 Co-authored-by: liuzedong02 <liuzedong02@baidu.com> Co-authored-by: liweijian <liweijian@hkmtl.com> Co-authored-by: wuduoyi <wuduoyi@baidu.com> Co-authored-by: RUNZE LU <36724300+lurunze1226@users.noreply.github.com> * fix:修复删除图标颜色问题 (#4245) * faet: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层 * feat: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层 * faet: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层 * faet: Step组件支持点状步骤条、指定标签放置位置、新增超出内容显示浮层 * fix: 点状步骤条样式修改 * fix: inputTree组件对齐4.0标准 * fix: textarea组件对齐4.0标准 * fix: textarea组件对齐4.0标准 * fix: inputImage组件对齐4.0标准 * fix: inputImage组件对齐4.0标准 * fix: inputImage组件对齐4.0标准 * fix: inputImage组件对齐4.0标准 * fix: image组件样式优化 * fix: image组件样式优化 * fix: image组件样式优化 * fix: image组件样式优化 * fix: 修复conditionbuilder组价图标颜色问题 Co-authored-by: qiaoganggang <qiaoganggang@baidu.com> * form表单对齐云社4.0 (#4248) * feat: form增加表单项 label文本对齐方式选项 * fix: remark 支持在表单内配置 * style: form 间距对齐云社4.0 Co-authored-by: sarding <hongfuquan@baidu.com> * Fix chart radios name (#4251) * fix: Chart 单选框 修改为 ChartRadios 图表单选框 * fix: input-password 修改 可见 图标 Co-authored-by: liuzedong02 <liuzedong02@baidu.com> * feat: checkboxes内边距&nestedSelect箭头修改 (#4254) Co-authored-by: xujiahao01 <xujiahao01@baidu.com> * Feature style 4.0 cxd (#4261) * feat: 日期&折叠面板&提示样式对齐 * fix:测试用例修复 * feat: timeRange开始和结束分开&日期样式优化 * styles: 日历样式修复 Co-authored-by: hongyang03 <hongyang03@baidu.com> * 整体字体大小调整 (#4264) * feat: form增加表单项 label文本对齐方式选项 * fix: remark 支持在表单内配置 * style: form 间距对齐云社4.0 * 修改表单的字体 Co-authored-by: sarding <hongfuquan@baidu.com> * inputfile 和 drawer对齐云社4.0 (#4249) * fix: drawer 和 inputfile 关闭图标对齐云社4.0 * fix:修改 drawer的图标大小 和边框圆角 * drawer 样式调整 Co-authored-by: sarding <hongfuquan@baidu.com> * Fix style (#4265) * fix: input-password icon 高度 * fix: input-password icon 换行问题 Co-authored-by: liuzedong02 <liuzedong02@baidu.com> * fix: curd 图标垂直居中 (#4271) Co-authored-by: liuzedong02 <liuzedong02@baidu.com> * fix:修复nestedSelect无法动态调整位置及溢出问题 (#4292) Co-authored-by: xujiahao01 <xujiahao01@baidu.com> * style: 优化switch组件动效 (#4302) * style:优化date组件最小宽度 (#4303) * style:cxd主题移动端基础字号调整为16px (#4305) * style:switch调整动效速度 * chore:更新快照 * chore:更新快照 Co-authored-by: xujiahao01 <xujiahao01@baidu.com> Co-authored-by: qiaogg <43558337+qiaogg@users.noreply.github.com> Co-authored-by: qiaoganggang <qiaoganggang@baidu.com> Co-authored-by: sansiro <sansiro@sansiro.me> Co-authored-by: liuzedong02 <liuzedong02@baidu.com> Co-authored-by: liweijian <liweijian@hkmtl.com> Co-authored-by: wuduoyi <wuduoyi@baidu.com> Co-authored-by: RUNZE LU <36724300+lurunze1226@users.noreply.github.com> Co-authored-by: sarding <37691952+sarding@users.noreply.github.com> Co-authored-by: sarding <hongfuquan@baidu.com> Co-authored-by: 徐佳豪 <53201551+blue-squirrel@users.noreply.github.com> Co-authored-by: HongYang <33488114+hy993658052@users.noreply.github.com> Co-authored-by: hongyang03 <hongyang03@baidu.com>
343 lines
17 KiB
Markdown
Executable File
343 lines
17 KiB
Markdown
Executable File
---
|
||
title: InputFile 文件上传
|
||
description:
|
||
type: 0
|
||
group: null
|
||
menuName: InputFile
|
||
icon:
|
||
order: 21
|
||
---
|
||
|
||
## 基本用法
|
||
|
||
用来负责文件上传,文件上传成功后会返回文件地址,这个文件地址会作为这个表单项的值,整个表单提交的时候,其实提交的是文件地址,文件上传已经在这个控件中完成了。
|
||
|
||
> 如果希望文件内容伴随表单一起提交,可以配置 `asBlob` 或者 `asBase64`。
|
||
|
||
```schema: scope="body"
|
||
{
|
||
"type": "form",
|
||
"api": "/api/mock2/form/saveForm",
|
||
"body": [
|
||
{
|
||
"type": "input-file",
|
||
"name": "file",
|
||
"label": "File",
|
||
"accept": "*",
|
||
"receiver": "/api/upload/file"
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
### 接口说明
|
||
|
||
这是单文件上传模式,通过配置 `receiver` 来接管文件上传。
|
||
|
||
接口发送方式是 POST, 数据体为 form-data 格式。对应的文件字段名为 `file`。这个可以通过 `fileField` 来配置。要求返回的数据格式如下。
|
||
|
||
```json
|
||
{
|
||
"status": 0,
|
||
"msg": "",
|
||
"data": {
|
||
"value": "xxxx"
|
||
}
|
||
}
|
||
```
|
||
|
||
- value:必须返回该字段用作回显,一般是文件资源地址
|
||
|
||
> 注意这只是单文件上传部分,如果允许上传的文件比较大,建议用分块上传,请阅读下面的分块上传部分。
|
||
|
||
## 限制文件类型
|
||
|
||
可以配置`accept`来限制可选择的文件类型,格式是文件后缀名`.xxx`
|
||
|
||
```schema: scope="body"
|
||
{
|
||
"type": "form",
|
||
"api": "/api/mock2/form/saveForm",
|
||
"body": [
|
||
{
|
||
"type": "input-file",
|
||
"name": "file",
|
||
"label": "限制只能上传csv文件",
|
||
"accept": ".csv",
|
||
"receiver": "/api/upload/file"
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
想要限制多个类型,则用逗号分隔,例如:`.csv,.md`
|
||
|
||
## 手动上传
|
||
|
||
如果不希望 File 组件上传,可以配置 `asBlob` 或者 `asBase64`,采用这种方式后,组件不再自己上传了,而是直接把文件数据作为表单项的值,文件内容会在 Form 表单提交的接口里面一起带上。
|
||
|
||
```schema: scope="body"
|
||
{
|
||
"type": "form",
|
||
"api": "/api/mock2/form/saveForm",
|
||
"debug": true,
|
||
"body": [
|
||
{
|
||
"type": "input-file",
|
||
"name": "file",
|
||
"label": "File",
|
||
"accept": "*",
|
||
"asBlob": true
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
上例中,选择任意文件,然后观察数据域变化;点击提交,amis 自动会调整接口数据格式为`FormData`
|
||
|
||
## 分块上传
|
||
|
||
如果文件过大,则可能需要使用分块上传,默认大于 5M(chunkSize 配置决定) 的文件是会自动开启,可以通过 `useChunk` 配置成 false 关闭。
|
||
|
||
分块上传需要配置三个接口来完成分别是:
|
||
|
||
- `startChunkApi` 用来做分块前的准备工作
|
||
- `chunkApi` 用来接收每个分块上传
|
||
- `finishChunkApi` 用来收尾分块上传
|
||
|
||
还可以通过 `concurrency` 控制并行数量,默认是 3
|
||
|
||
### startChunkApi
|
||
|
||
用来做分块前的准备工作,一个文件只会调用一次。如果出错了,后续的分块上传就会中断。
|
||
|
||
发送说明:默认是 post,发送的数据中会包含 `filename` 字段,记录文件名,默认的数据体格式为 json。可以额外配置参数,请参考 API 的配置说明。
|
||
|
||
要求返回的数据中必须包含:
|
||
|
||
- `uploadId` 这次上传的唯一 ID。
|
||
- `key` 有点类似 `uploadId`,可有可无,爱速搭中用来记录后端文件存储路径。
|
||
|
||
其他属性返回目前是没有任何作用的。
|
||
|
||
如:
|
||
|
||
```
|
||
{
|
||
"status": 0,
|
||
"msg": "",
|
||
"data": {
|
||
"key": "images/JSSDK_page-xxxx.zip",
|
||
"uploadId": "036f64cd5dd95750d4bcb33556b629c6"
|
||
}
|
||
}
|
||
```
|
||
|
||
### chunkApi
|
||
|
||
用来接收每个分块上传,大文件会根据 chunkSize 分割成多块,然后每块上传都会调用这个接口。
|
||
|
||
发送说明:默认为 post,发送体格式为 form-data。包含以下信息:
|
||
|
||
- `uploadId` startChunkApi 返回的
|
||
- `key` startChunkApi 返回的
|
||
- `partNumber` 分块序号,从 1 开始。
|
||
- `partSize` 分块大小
|
||
- `file` 文件体
|
||
|
||
要求返回的数据中必须包含:
|
||
|
||
- `eTag` 通常为文件的内容戳。
|
||
|
||
如:
|
||
|
||
```
|
||
{
|
||
"status": 0,
|
||
"msg": "",
|
||
"data": {
|
||
"eTag": "016bd9b68ddd5cd7318875da3ea28207"
|
||
}
|
||
}
|
||
```
|
||
|
||
### finishChunkApi
|
||
|
||
等所有分块上传完后,将上传文件收集到的 `eTag` 信息合并一起,再次请求后端完成文件上传。
|
||
|
||
发送说明:默认为 post,数据体默认为 json,包含以下信息
|
||
|
||
- `filename` 文件名
|
||
- `key` startChunkApi 返回的
|
||
- `uploadId` startChunkApi 返回的
|
||
- `partList` 数组,每个成员为 `{partNumber: xxx, eTag: "xxxxx"}` 即分块编号和分块 `eTag` 信息。
|
||
|
||
数据返回,类似单文件上传一样,必须有 `value` 属性,可选返回 `url` 用来决定文件的下载地址。如:
|
||
|
||
```
|
||
{
|
||
"status": 0,
|
||
"msg": "",
|
||
"data": {
|
||
"value": "https://xxxx.cdn.bcebos.com/images/JSSDK_page-xxxxx.zip"
|
||
}
|
||
}
|
||
```
|
||
|
||
## 自动填充
|
||
|
||
上传成功后,可以通过配置 `autoFill` 将上传接口返回的值填充到某个表单项中(在非表单下暂不支持):
|
||
|
||
```schema: scope="body"
|
||
{
|
||
"type": "form",
|
||
"api": "/api/mock2/form/saveForm",
|
||
"body": [
|
||
{
|
||
"type": "input-file",
|
||
"name": "file",
|
||
"label": "File",
|
||
"accept": "*",
|
||
"receiver": "/api/upload/file",
|
||
"autoFill": {
|
||
"myUrl": "${url}"
|
||
}
|
||
},
|
||
{
|
||
"type": "input-text",
|
||
"name": "myUrl",
|
||
"label": "url"
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
上例中,file 组件上传后,接口返回格式例如如下:
|
||
|
||
```json
|
||
{
|
||
"status": 0,
|
||
"msg": "",
|
||
"data": {
|
||
"value": "xxxxxxx",
|
||
"filename": "xxxx.csv",
|
||
"url": "http://xxxx.xxx.xxx"
|
||
}
|
||
}
|
||
```
|
||
|
||
然后 file 上配置:
|
||
|
||
```json
|
||
"autoFill": {
|
||
"myUrl": "${url}"
|
||
}
|
||
```
|
||
|
||
这样上传成功后,会把接口中的 `url` 变量,赋值给 `myUrl` 变量
|
||
|
||
**多选模式**
|
||
|
||
当表单项为多选模式时,不能再直接取选项中的值了,而是通过 `items` 变量来取,通过它可以获取当前选中的选项集合。
|
||
|
||
```schema: scope="body"
|
||
{
|
||
"type": "form",
|
||
"debug": true,
|
||
"api": "/api/mock2/form/saveForm",
|
||
"body": [
|
||
{
|
||
"type": "input-file",
|
||
"name": "file",
|
||
"label": "File",
|
||
"multiple": true,
|
||
"receiver": "/api/upload/file",
|
||
"autoFill": {
|
||
"myUrl": "${items|pick:url}",
|
||
"lastUrl": "${items|last|pick:url}"
|
||
}
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
## 拖拽上传
|
||
|
||
把文件拖入指定区域,完成上传,同样支持点击上传。
|
||
|
||
```schema: scope="body"
|
||
{
|
||
"type": "form",
|
||
"api": "/api/mock2/form/saveForm",
|
||
"body": [
|
||
{
|
||
"type": "input-file",
|
||
"name": "file",
|
||
"label": "File",
|
||
"accept": "*",
|
||
"receiver": "/api/upload/file",
|
||
"drag": true
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
## 属性表
|
||
|
||
除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外,还支持下面一些配置
|
||
|
||
| 属性名 | 类型 | 默认值 | 说明 |
|
||
| ---------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
|
||
| receiver | [API](../../../docs/types/api) | | 上传文件接口 |
|
||
| accept | `string` | `text/plain` | 默认只支持纯文本,要支持其他类型,请配置此属性为文件后缀`.xxx` |
|
||
| asBase64 | `boolean` | `false` | 将文件以`base64`的形式,赋值给当前组件 |
|
||
| asBlob | `boolean` | `false` | 将文件以二进制的形式,赋值给当前组件 |
|
||
| maxSize | `number` | | 默认没有限制,当设置后,文件大小大于此值将不允许上传。单位为`B` |
|
||
| maxLength | `number` | | 默认没有限制,当设置后,一次只允许上传指定数量文件。 |
|
||
| multiple | `boolean` | `false` | 是否多选。 |
|
||
| drag | `boolean` | `false` | 是否为拖拽上传 |
|
||
| joinValues | `boolean` | `true` | [拼接值](./options#%E6%8B%BC%E6%8E%A5%E5%80%BC-joinvalues) |
|
||
| extractValue | `boolean` | `false` | [提取值](./options#%E6%8F%90%E5%8F%96%E5%A4%9A%E9%80%89%E5%80%BC-extractvalue) |
|
||
| delimiter | `string` | `,` | [拼接符](./options#%E6%8B%BC%E6%8E%A5%E7%AC%A6-delimiter) |
|
||
| autoUpload | `boolean` | `true` | 否选择完就自动开始上传 |
|
||
| hideUploadButton | `boolean` | `false` | 隐藏上传按钮 |
|
||
| stateTextMap | object | `{ init: '', pending: '等待上传', uploading: '上传中', error: '上传出错', uploaded: '已上传', ready: '' }` | 上传状态文案 |
|
||
| fileField | `string` | `file` | 如果你不想自己存储,则可以忽略此属性。 |
|
||
| nameField | `string` | `name` | 接口返回哪个字段用来标识文件名 |
|
||
| valueField | `string` | `value` | 文件的值用那个字段来标识。 |
|
||
| urlField | `string` | `url` | 文件下载地址的字段名。 |
|
||
| btnLabel | `string` | | 上传按钮的文字 |
|
||
| downloadUrl | `boolean`或`string` | `""` 1.1.6 版本开始支持 `post:http://xxx.com/${value}` 这种写法 | 默认显示文件路径的时候会支持直接下载,可以支持加前缀如:`http://xx.dom/filename=` ,如果不希望这样,可以把当前配置项设置为 `false`。 |
|
||
| useChunk | `boolean`或`"auto"` | `"auto"` | amis 所在服务器,限制了文件上传大小不得超出 10M,所以 amis 在用户选择大文件的时候,自动会改成分块上传模式。 |
|
||
| chunkSize | `number` | `5 * 1024 * 1024` | 分块大小 |
|
||
| startChunkApi | [API](../../../docs/types/api) | | startChunkApi |
|
||
| chunkApi | [API](../../../docs/types/api) | | chunkApi |
|
||
| finishChunkApi | [API](../../../docs/types/api) | | finishChunkApi |
|
||
| concurrency | `number` | | 分块上传时并行个数
|
||
| documentation | `string` | | 文档内容
|
||
| documentLink | `string` | | 文档链接 |
|
||
|
||
## 事件表
|
||
|
||
| 事件名称 | 事件参数 | 说明 |
|
||
| -------- | ------------------------ | -------------------- |
|
||
| change | `file: Array<FileValue>` | 文件值发生变化时触发 |
|
||
| remove | `file: FileValue` | 被移除的文件 |
|
||
| success | `file: FileValue` | 上传成功的文件 |
|
||
| fail | `file: FileValue` | 上传失败的文件 |
|
||
|
||
### FileValue 属性表
|
||
|
||
| 属性名 | 类型 | 说明 |
|
||
| ------ | -------- | -------------------------------------------------- |
|
||
| name | `string` | 文件名称 |
|
||
| value | `string` | 上传成功后返回的 url |
|
||
| state | `string` | 文件当前状态,值可为 `pending` `uploaded` `invalid` |
|
||
| error | `string` | 错误信息 |
|
||
|
||
## 动作表
|
||
|
||
| 动作名称 | 动作配置 | 说明 |
|
||
| -------- | -------- | ---- |
|
||
| clear | - | 清空 |
|