diff --git a/docs/zh-CN/components/form/input-file.md b/docs/zh-CN/components/form/input-file.md index 19b69beb2..10b6e8fd3 100755 --- a/docs/zh-CN/components/form/input-file.md +++ b/docs/zh-CN/components/form/input-file.md @@ -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) 中的配置以外,还支持下面一些配置 diff --git a/docs/zh-CN/components/form/input-image.md b/docs/zh-CN/components/form/input-image.md index 6298f8618..294e46fd1 100755 --- a/docs/zh-CN/components/form/input-image.md +++ b/docs/zh-CN/components/form/input-image.md @@ -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` ## 自动填充