---
group:
  title: 表单控件
  order: 4
title: Uploader
toc: content
---

# Uploader 上传控件

> 用于上传图片、文件等

## 基础用法

```
// 单独引入
import {Uploader} from 'fan-standard-comp';

// 基础控件使用 
import {Field} from 'fan-standard-comp';
<Field type="uploader"></Field>
```

## 代码演示

<code title="基本使用" src="../../src/FormComp/Uploader/demos/basic.tsx" ></code>

<code title="图片类型"  src="../../src/FormComp/Uploader/demos/image.tsx"></code>

<code title="限制上传数量" src="../../src/FormComp/Uploader/demos/limit.tsx"></code>

<code title="上传前裁剪" description="注：使用`antd-img-crop`在开发环境热更新时会报错，暂时未修复 "  src="../../src/FormComp/Uploader/demos/crop.tsx"></code>

<code title="限制文件大小" description="使用`size`时，如果不指定`limitUnit`，则传入字节数（ 如`2*1024*1024`表示限制`2M`），超出提示显示为`'M'`；但是如果指定了`limitUnit`则就按实际的单位数值传（例如1M传值为 `size={1} limitUnit='M'`)" src="../../src/FormComp/Uploader/demos/size.tsx"></code>

## API
| 参数      | 说明                                      | 类型         | 默认值 | 参考值 |
|----------|------------------------------------------|-------------|-------|-------|
| isOnly | 是否单选 | Boolean | false |- |
| value | 控件值 | Array/String/Object |  |`[{downloadUrl: 'xxx'}]` 或[{url: 'xxx'}]|
| fileType |文件类型 | String |  |可选:image/office/svg/zip（默认不指定类型时，所有文件类型都支持，即返回了*|
| accept | 额外的扩展名,同extraExt | String |  |- |
| extraExt | 额外的扩展名,同accept | String |  |- |
| size | 文件大小限制(默认传值为字节数)| Number |  |- |
| limitSize(`v4.1.16`) |  限制大小数值（如：2）| Number |  |- |
| limitUnit(`v4.1.16`) | 限制单位(如直接使用`size`则`limitUnit默认取'M'`| String | `M` | `'K'、'M' 或 'G'` |
| displayUnit(`v4.1.16`) | 提示信息的单位（默认使用`limitUnit`）| String | `M` | `K/M/G` |
| limit/maxCount |限制上传数量 | Number | - | 值需大于0，如与`isOnly`同时配置，则优先仅限制1张 |
| children | 配置结构| ReactNode |  |- |
| onChange |选择或更改文件上传列表 | Function |  | - |
| viewOnly |只读（即只有预览功能） | Boolean|  | - |
| disabled |禁用 | Boolean|  | - |
| crop |图片裁剪(`fileType='image'`且未配置`multiple=true`情况下有效） | Boolean|  | - |
| cropConfig |图片裁剪配置项 | |  | [参考 API](https://github.com/nanxiaobei/antd-img-crop) |