mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-10 23:32:58 +08:00
10 KiB
Executable File
10 KiB
Executable File
title | description | type | group | menuName | icon | order |
---|---|---|---|---|---|---|
File 文件上传 | 0 | null | File | 21 |
基本用法
用来负责文件上传,文件上传成功后会返回文件地址,这个文件地址会作为这个表单项的值,整个表单提交的时候,其实提交的是文件地址,文件上传已经在这个控件中完成了。
{
"type": "form",
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
"controls": [
{
"type": "file",
"name": "file",
"label": "File",
"accept": "*",
"reciever": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/upload/file"
}
]
}
接口返回格式
{
"status": 0,
"msg": "",
"data": {
"value": "xxxx"
}
}
- value:必须返回该字段用作回显,一般是文件资源地址
限制文件类型
可以配置accept
来限制可选择的文件类型,格式是文件后缀名.xxx
{
"type": "form",
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
"controls": [
{
"type": "file",
"name": "file",
"label": "限制只能上传csv文件",
"accept": ".csv",
"reciever": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/upload/file"
}
]
}
想要限制多个类型,则用逗号分隔,例如:.csv,.md
手动上传
如果不希望 File 组件上传,可以配置 asBlob
或者 asBase64
,采用这种方式后,组件不再自己上传了,而是直接把文件数据作为表单项的值,文件内容会在 Form 表单提交的接口里面一起带上。
{
"type": "form",
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
"debug": true,
"controls": [
{
"type": "file",
"name": "file",
"label": "File",
"accept": "*",
"asBlob": true
}
]
}
上例中,选择任意文件,然后观察数据域变化;点击提交,amis 自动会调整接口数据格式为FormData
分块上传
如果文件过大,则可能需要使用分块上传
自动填充
上传成功后,可以通过配置 autoFill
将上传接口返回的值填充到某个表单项中:
{
"type": "form",
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
"controls": [
{
"type": "file",
"name": "file",
"label": "File",
"accept": "*",
"reciever": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/upload/file",
"autoFill": {
"myUrl": "${url}"
}
},
{
"type": "text",
"name": "myUrl",
"label": "url"
}
]
}
上例中,file 组件上传后,接口返回格式例如如下:
{
"status": 0,
"msg": "",
"data": {
"value": "xxxxxxx",
"filename": "xxxx.csv",
"url": "http://xxxx.xxx.xxx"
}
}
然后 file 上配置:
"autoFill": {
"myUrl": "${url}"
}
这样上传成功后,会把接口中的 url
变量,赋值给 myUrl
变量
属性表
除了支持 普通表单项属性表 中的配置以外,还支持下面一些配置
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
reciever | API | 上传文件接口 | |
accept | string |
text/plain |
默认只支持纯文本,要支持其他类型,请配置此属性为文件后缀.xxx |
asBase64 | boolean |
false |
将文件以base64 的形式,赋值给当前组件 |
asBlob | boolean |
false |
将文件以二进制的形式,赋值给当前组件 |
maxSize | number |
默认没有限制,当设置后,文件大小大于此值将不允许上传。单位为KB |
|
maxLength | number |
默认没有限制,当设置后,一次只允许上传指定数量文件。 | |
multiple | boolean |
false |
是否多选。 |
joinValues | boolean |
true |
拼接值 |
extractValue | boolean |
false |
提取值 |
delimiter | string |
, |
拼接符 |
autoUpload | boolean |
true |
否选择完就自动开始上传 |
hideUploadButton | boolean |
false |
隐藏上传按钮 |
stateTextMap | object | { init: '', pending: '等待上传', uploading: '上传中', error: '上传出错', uploaded: '已上传', ready: '' } |
上传状态文案 |
fileField | string |
file |
如果你不想自己存储,则可以忽略此属性。 |
downloadUrl | boolean 或string |
"" |
默认显示文件路径的时候会支持直接下载,可以支持加前缀如:http://xx.dom/filename= ,如果不希望这样,可以把当前配置项设置为 false 。 |
useChunk | boolean 或"auto" |
"auto" |
amis 所在服务器,限制了文件上传大小不得超出 10M,所以 amis 在用户选择大文件的时候,自动会改成分块上传模式。 |
chunkSize | number |
5 * 1024 * 1024 |
分块大小 |
startChunkApi | API | startChunkApi | |
chunkApi | API | chunkApi | |
finishChunkApi | API | finishChunkApi |