amis/docs/zh-CN/components/form/file.md

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": "*",
            "receiver": "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",
            "receiver": "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": "*",
      "receiver": "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 变量

属性表

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

属性名	类型	默认值	说明
receiver	API		上传文件接口
accept	string	text/plain	默认只支持纯文本，要支持其他类型，请配置此属性为文件后缀.xxx
asBase64	boolean	false	将文件以base64的形式，赋值给当前组件
asBlob	boolean	false	将文件以二进制的形式，赋值给当前组件
maxSize	number		默认没有限制，当设置后，文件大小大于此值将不允许上传。单位为B
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	如果你不想自己存储，则可以忽略此属性。
nameField	string	name	接口返回哪个字段用来标识文件名
valueField	string	value	文件的值用那个字段来标识。
urlField	string	url	文件下载地址的字段名。
btnLabel	string		上传按钮的文字
downloadUrl	boolean或string	"" 1.1.6 版本开始支持 post:http://xxx.com/${value} 这种写法	默认显示文件路径的时候会支持直接下载，可以支持加前缀如：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