mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-29 18:48:45 +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"
|
||||
{
|
||||
@ -344,6 +435,7 @@ order: 21
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
## 属性表
|
||||
|
||||
除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
|
||||
|
||||
@ -8,7 +8,7 @@ icon:
|
||||
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`
|
||||
|
||||
## 自动填充
|
||||
|
||||
Loading…
Reference in New Issue
Block a user