amis/docs/zh-CN/components/form/file.md
2021-01-19 10:20:09 +08:00

10 KiB
Executable File
Raw Blame History

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 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