amis/docs/components/form/file.md
2020-07-29 17:33:14 +08:00

8.7 KiB
Executable File
Raw Blame History

title description type group menuName icon order
File 文件上传 0 null File 21

基本用法

用来负责文件上传,文件上传成功后会返回文件地址,这个文件地址会作为这个表单项的值,整个表单提交的时候,其实提交的是文件地址,文件上传已经在这个控件中完成了。

{
    "type": "form",
    "api": "https://houtai.baidu.com/api/mock2/form/saveForm",
    "controls": [
        {
            "type": "file",
            "name": "file",
            "label": "File",
            "accept": "*",
            "reciever": "https://houtai.baidu.com/api/upload/file"
        }
    ]
}

限制文件类型

可以配置accept来限制可选择的文件类型,格式是文件后缀名.xxx

{
    "type": "form",
    "api": "https://houtai.baidu.com/api/mock2/form/saveForm",
    "controls": [
        {
            "type": "file",
            "name": "file",
            "label": "限制只能上传csv文件",
            "accept": ".csv",
            "reciever": "https://houtai.baidu.com/api/upload/file"
        }
    ]
}

想要限制多个类型,则用逗号分隔,例如:.csv,.md

手动上传

如果不希望 File 组件上传,可以配置 asBlob 或者 asBase64,采用这种方式后,组件不再自己上传了,而是直接把文件数据作为表单项的值,文件内容会在 Form 表单提交的接口里面一起带上。

{
    "type": "form",
    "api": "https://houtai.baidu.com/api/mock2/form/saveForm",
    "debug": true,
    "controls": [
        {
            "type": "file",
            "name": "file",
            "label": "File",
            "accept": "*",
            "asBlob": true
        }
    ]
}

上例中选择任意文件然后观察数据域变化点击提交amis 自动会调整接口数据格式为FormData

分块上传

如果文件过大,则可能需要使用分块上传

属性表

除了支持 普通表单项属性表 中的配置以外,还支持下面一些配置

属性名 类型 默认值 说明
reciever API 上传文件接口
accept string text/plain 默认只支持纯文本,要支持其他类型,请配置此属性为文件后缀.xxx
asBase64 boolean false 将文件以base64的形式,赋值给当前组件
asBlob boolean false 将文件以二进制的形式,赋值给当前组件
maxSize string 默认没有限制,当设置后,文件大小大于此值将不允许上传。单位为KB
maxLength number 默认没有限制,当设置后,一次只允许上传指定数量文件。
multiple boolean false 是否多选。
joinValues boolean true 拼接值
extractValue boolean false 提取值
delimeter string , 拼接符
autoUpload boolean true 否选择完就自动开始上传
hideUploadButton boolean false 隐藏上传按钮
stateTextMap object { init: '', pending: '等待上传', uploading: '上传中', error: '上传出错', uploaded: '已上传', ready: '' } 上传状态文案
fileField string file 如果你不想自己存储,则可以忽略此属性。
downloadUrl booleanstring "" 默认显示文件路径的时候会支持直接下载,可以支持加前缀如: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