mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-30 02:48:55 +08:00
docs: InputFile & InputImage补充autoUpload、hideUploadButton属性Demo (#9106)
This commit is contained in:
RUNZE LU
GitHub
parent
39bcb95186
commit
4ccb9d8bf6
@ -94,7 +94,98 @@ order: 21
|
|||||||
|
|
||||||
## 手动上传
|
## 手动上传
|
||||||
|
|
||||||
如果不希望 File 组件上传，可以配置 `asBlob` 或者 `asBase64`，采用这种方式后，组件不再自己上传了，而是直接把文件数据作为表单项的值，文件内容会在 Form 表单提交的接口里面一起带上。
|
默认`"autoUpload": true`，即添加文件后自动上传。可以设置`"autoUpload": false`关闭自动上传，此时通过点击上传按钮上传。
|
||||||
|
|
||||||
|
```schema: scope="body"
|
||||||
|
{
|
||||||
|
"type": "form",
|
||||||
|
"api": "/api/mock2/form/saveForm",
|
||||||
|
"data": {
|
||||||
|
"file": {
|
||||||
|
"id":"2ba48d02d348",
|
||||||
|
"value":"http://amis.bj.bcebos.com/amis/2017-11/1510713111265/fis3-react.md",
|
||||||
|
"url":"http://amis.bj.bcebos.com/amis/2017-11/1510713111265/fis3-react.md",
|
||||||
|
"filename":"file(single).md",
|
||||||
|
"name":"file(single).md",
|
||||||
|
"state":"uploaded"
|
||||||
|
},
|
||||||
|
"files": [
|
||||||
|
{
|
||||||
|
"id":"2ba48d02d349",
|
||||||
|
"value":"http://amis.bj.bcebos.com/amis/2017-11/1510713111265/fis3-react.md",
|
||||||
|
"url":"http://amis.bj.bcebos.com/amis/2017-11/1510713111265/fis3-react.md",
|
||||||
|
"filename":"file1.md",
|
||||||
|
"name":"file1.md",
|
||||||
|
"state":"uploaded"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id":"14723e0bc640",
|
||||||
|
"value":"http://amis.bj.bcebos.com/amis/2017-11/1510713111265/fis3-react.md",
|
||||||
|
"url":"http://amis.bj.bcebos.com/amis/2017-11/1510713111265/fis3-react.md",
|
||||||
|
"filename":"file2.md",
|
||||||
|
"name":"file2.md",
|
||||||
|
"state":"uploaded"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"body": [
|
||||||
|
{
|
||||||
|
"type": "input-file",
|
||||||
|
"name": "files",
|
||||||
|
"label": "File(多选)",
|
||||||
|
"mode": "horizontal",
|
||||||
|
"labelAlign": "left",
|
||||||
|
"accept": "*",
|
||||||
|
"receiver": "/api/upload/file",
|
||||||
|
"multiple": true,
|
||||||
|
"autoUpload": false,
|
||||||
|
"joinValues": false,
|
||||||
|
"onEvent": {
|
||||||
|
"success": {
|
||||||
|
"actions": [
|
||||||
|
{
|
||||||
|
"actionType": "toast",
|
||||||
|
"args": {
|
||||||
|
"msgType": "info",
|
||||||
|
"msg": "「${event.data.path}」上传成功"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "input-file",
|
||||||
|
"name": "file",
|
||||||
|
"label": "File(单选)",
|
||||||
|
"mode": "horizontal",
|
||||||
|
"labelAlign": "left",
|
||||||
|
"accept": "*",
|
||||||
|
"receiver": "/api/upload/file",
|
||||||
|
"multiple": false,
|
||||||
|
"autoUpload": false,
|
||||||
|
"joinValues": false,
|
||||||
|
"onEvent": {
|
||||||
|
"success": {
|
||||||
|
"actions": [
|
||||||
|
{
|
||||||
|
"actionType": "toast",
|
||||||
|
"args": {
|
||||||
|
"msgType": "info",
|
||||||
|
"msg": "「${event.data.path}」上传成功"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 作为表单项上传
|
||||||
|
|
||||||
|
如果不希望 InputFile 组件在提交Form之前上传，可以配置 `asBlob` 或者 `asBase64`，采用这种方式后，组件不再自己上传了，而是直接把文件数据作为表单项的值，文件内容会在 Form 表单提交的接口里面一起带上。
|
||||||
|
|
||||||
```schema: scope="body"
|
```schema: scope="body"
|
||||||
{
|
{
|
||||||
@ -344,6 +435,7 @@ order: 21
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
## 属性表
|
## 属性表
|
||||||
|
|
||||||
除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
|
除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
|
||||||
|
|||||||
@ -8,7 +8,7 @@ icon:
|
|||||||
order: 27
|
order: 27
|
||||||
---
|
---
|
||||||
|
|
||||||
图片格式输入，需要实现接收器，提交时将以 url 的方式提交，如果需要以表单方式提交请使用 [InputFile](input-file#手动上传)。
|
图片格式输入，需要实现接收器，提交时将以 url 的方式提交，如果需要以表单方式提交请使用 [InputFile](input-file#作为表单项上传)。
|
||||||
|
|
||||||
## 基本用法
|
## 基本用法
|
||||||
|
|
||||||
@ -199,6 +199,194 @@ app.listen(8080, function () {});
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## 手动上传
|
||||||
|
|
||||||
|
默认`"autoUpload": true`，即添加文件后自动上传。可以设置`"autoUpload": false`关闭自动上传，此时通过点击底部上传按钮上传。
|
||||||
|
|
||||||
|
```schema: scope="body"
|
||||||
|
{
|
||||||
|
"type": "form",
|
||||||
|
"api": "/api/mock2/form/saveForm",
|
||||||
|
"data": {
|
||||||
|
"file": {
|
||||||
|
"id":"2ba48d02d348",
|
||||||
|
"value":"https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693148/1314a2a3d3f6.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||||
|
"url":"https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693148/1314a2a3d3f6.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||||
|
"filename":"file(single).md",
|
||||||
|
"name":"file(single).md",
|
||||||
|
"state":"uploaded"
|
||||||
|
},
|
||||||
|
"files": [
|
||||||
|
{
|
||||||
|
"id":"2ba48d02d349",
|
||||||
|
"value":"https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||||
|
"url":"https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||||
|
"preview": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||||
|
"filename":"file1.md",
|
||||||
|
"name":"file1.md",
|
||||||
|
"state":"uploaded"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "14723e0bc640",
|
||||||
|
"value": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692942/d8e4992057f9.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||||
|
"url": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692942/d8e4992057f9.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||||
|
"preview": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692942/d8e4992057f9.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||||
|
"filename":"file2.md",
|
||||||
|
"name":"file2.md",
|
||||||
|
"state":"uploaded"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"body": [
|
||||||
|
{
|
||||||
|
"type": "input-image",
|
||||||
|
"name": "files",
|
||||||
|
"label": "File(多选)",
|
||||||
|
"mode": "horizontal",
|
||||||
|
"labelAlign": "left",
|
||||||
|
"accept": "image/jpeg, image/jpg, image/png, image/gif",
|
||||||
|
"receiver": "/api/upload/file",
|
||||||
|
"multiple": true,
|
||||||
|
"autoUpload": false,
|
||||||
|
"joinValues": false,
|
||||||
|
"onEvent": {
|
||||||
|
"success": {
|
||||||
|
"actions": [
|
||||||
|
{
|
||||||
|
"actionType": "toast",
|
||||||
|
"args": {
|
||||||
|
"msgType": "info",
|
||||||
|
"msg": "「${event.data.path}」上传成功"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "input-image",
|
||||||
|
"name": "file",
|
||||||
|
"label": "File(单选)",
|
||||||
|
"mode": "horizontal",
|
||||||
|
"labelAlign": "left",
|
||||||
|
"accept": "image/jpeg, image/jpg, image/png, image/gif",
|
||||||
|
"receiver": "/api/upload/file",
|
||||||
|
"multiple": false,
|
||||||
|
"autoUpload": false,
|
||||||
|
"joinValues": false,
|
||||||
|
"onEvent": {
|
||||||
|
"success": {
|
||||||
|
"actions": [
|
||||||
|
{
|
||||||
|
"actionType": "toast",
|
||||||
|
"args": {
|
||||||
|
"msgType": "info",
|
||||||
|
"msg": "「${event.data.path}」上传成功"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 隐藏上传按钮
|
||||||
|
|
||||||
|
设置 `"hideUploadButton": true` 隐藏手动上传的按钮。
|
||||||
|
|
||||||
|
```schema: scope="body"
|
||||||
|
{
|
||||||
|
"type": "form",
|
||||||
|
"api": "/api/mock2/form/saveForm",
|
||||||
|
"data": {
|
||||||
|
"file": {
|
||||||
|
"id":"2ba48d02d348",
|
||||||
|
"value":"https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693148/1314a2a3d3f6.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||||
|
"url":"https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693148/1314a2a3d3f6.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||||
|
"filename":"file(single).md",
|
||||||
|
"name":"file(single).md",
|
||||||
|
"state":"uploaded"
|
||||||
|
},
|
||||||
|
"files": [
|
||||||
|
{
|
||||||
|
"id":"2ba48d02d349",
|
||||||
|
"value":"https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||||
|
"url":"https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||||
|
"preview": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||||
|
"filename":"file1.md",
|
||||||
|
"name":"file1.md",
|
||||||
|
"state":"uploaded"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "14723e0bc640",
|
||||||
|
"value": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692942/d8e4992057f9.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||||
|
"url": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692942/d8e4992057f9.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||||
|
"preview": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692942/d8e4992057f9.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||||
|
"filename":"file2.md",
|
||||||
|
"name":"file2.md",
|
||||||
|
"state":"uploaded"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"body": [
|
||||||
|
{
|
||||||
|
"type": "input-image",
|
||||||
|
"name": "files",
|
||||||
|
"label": "File(多选)",
|
||||||
|
"mode": "horizontal",
|
||||||
|
"labelAlign": "left",
|
||||||
|
"accept": "image/jpeg, image/jpg, image/png, image/gif",
|
||||||
|
"receiver": "/api/upload/file",
|
||||||
|
"multiple": true,
|
||||||
|
"autoUpload": false,
|
||||||
|
"joinValues": false,
|
||||||
|
"hideUploadButton": true,
|
||||||
|
"onEvent": {
|
||||||
|
"success": {
|
||||||
|
"actions": [
|
||||||
|
{
|
||||||
|
"actionType": "toast",
|
||||||
|
"args": {
|
||||||
|
"msgType": "info",
|
||||||
|
"msg": "「${event.data.path}」上传成功"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "input-image",
|
||||||
|
"name": "file",
|
||||||
|
"label": "File(单选)",
|
||||||
|
"mode": "horizontal",
|
||||||
|
"labelAlign": "left",
|
||||||
|
"accept": "image/jpeg, image/jpg, image/png, image/gif",
|
||||||
|
"receiver": "/api/upload/file",
|
||||||
|
"multiple": false,
|
||||||
|
"autoUpload": false,
|
||||||
|
"joinValues": false,
|
||||||
|
"hideUploadButton": true,
|
||||||
|
"onEvent": {
|
||||||
|
"success": {
|
||||||
|
"actions": [
|
||||||
|
{
|
||||||
|
"actionType": "toast",
|
||||||
|
"args": {
|
||||||
|
"msgType": "info",
|
||||||
|
"msg": "「${event.data.path}」上传成功"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
如果浏览器支持，还能设置为 `image/webp`
|
如果浏览器支持，还能设置为 `image/webp`
|
||||||
|
|
||||||
## 自动填充
|
## 自动填充
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user