> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# ImageField 上传图片

> ImageField 上传图片组件参考，介绍图片数量限制与预览等属性配置，用于表单中的图片素材上传与提交。

## 何时使用

* 用于进行图片素材上传并提交场景；

## 组件示例

<iframe src="https://www.aliwork.com/developer/image-field-v2?isRenderNav=false" width="100%" height="480" frameBorder="0" />

## 组件属性

| 属性                 | 说明                                                              | 类型                                                                  | 默认值         |
| ------------------ | --------------------------------------------------------------- | ------------------------------------------------------------------- | ----------- |
| `accept`           | 设置上传图片类型(多个以英文逗号,分隔)                                            | `string`                                                            | `'image/*'` |
| `autoUpload`       | 是否自动上传，关闭后，需要手动调用 this.\$('fieldId').startUpload() 开始上传         | `boolean`                                                           | `true`      |
| `beforeUpload`     | 上传前处理事件                                                         | `(file: object, options: object) => void`                           | -           |
| `behavior`         | 表单组件显示状态                                                        | [Behavior](/zh/open/yida/components/interface#behavior)             | `'NORMAL'`  |
| `buttonSize`       | 上传按钮尺寸                                                          | `'small' \| 'medium' \| 'large'`                                    | `'medium'`  |
| `buttonText`       | 设置按钮内容，仅 PC 端有效                                                 | `string`                                                            | `'上传文件'`    |
| `buttonType`       | 上传按钮类型                                                          | `'primary' \| 'secondary' \| 'normal'`                              | `'primary'` |
| `customUploadPane` | 定制面板                                                            | `() => ReactNode`                                                   | -           |
| `data`             | 设置上传可附带的额外参数                                                    | `object`                                                            | `{}`        |
| `formatter`        | 数据处理事件                                                          | `(response: any) => any`                                            | -           |
| `label`            | 表单组件标题                                                          | `string`                                                            | -           |
| `labelAlign`       | 表单组件标题的位置                                                       | `'left' \| 'top'`                                                   | `'top'`     |
| `labelColOffset`   | 设置标题的偏移位置，配置值为栅格值，1代表1/24                                       | `number`                                                            | `0`         |
| `labelColSpan`     | 设置标题的占位宽度，配置值为栅格值，1代表1/24                                       | `number`                                                            | `4`         |
| `labelTextAlign`   | 表单组件的标题对齐方式                                                     | `'left' \| 'right'`                                                 | `'right'`   |
| `labelTipsIcon`    | 表单组件标题提示信息入口图标，当labelTipsTypes取值为 **text** 或 **render** 时生效     | `string`                                                            | -           |
| `labelTipsRender`  | 表单组件标题提示信息自定义渲染方法，当labelTipsTypes取值为 **render** 时生效             | `(props: IComponentProps) => ReactNode`                             | -           |
| `labelTipsText`    | 表单组件标题提示文本信息，当labelTipsTypes取值为 **text** 时生效                    | `string`                                                            | -           |
| `labelTipsTypes`   | 表单组件标题提示信息类型设置                                                  | [LabelTipsTypes](/zh/open/yida/components/interface#labelTipsTypes) | `'none'`    |
| `limit`            | 设置最大上传文件个数                                                      | `number`                                                            | `9`         |
| `maxFileSize`      | 设置单文件最大上传大小(MB)                                                 | `number`                                                            | `50`        |
| `multiple`         | 是否支持上传多个图片                                                      | `boolean`                                                           | `true`      |
| `name`             | 上传时发送给服务端的 name                                                 | `string`                                                            | -           |
| `normalListType`   | 设置列表样式                                                          | `'text' \| 'image'`                                                 | `'image'`   |
| `onCancel`         | 组件值点击取消上传的事件                                                    | `() => void`                                                        | -           |
| `onChange`         | 组件值发生改变事件                                                       | `({ value: object }) => void`                                       | -           |
| `onDragLeave`      | 组件值拖拽离开的事件                                                      | `() => void`                                                        | -           |
| `onDragOver`       | 组件值拖拽经过的事件                                                      | `() => void`                                                        | -           |
| `onDrop`           | 组件值拖拽完成的事件                                                      | `() => void`                                                        | -           |
| `onError`          | 组件值上传失败事件                                                       | `(file: object, value: array) => void`                              | -           |
| `onProgress`       | 组件上传中事件                                                         | `() => void`                                                        | -           |
| `onRemove`         | 组件值点击移除的事件                                                      | `(file: object) => void`                                            | -           |
| `onSelect`         | 组件值选择的事件                                                        | `(file: object) => void`                                            | -           |
| `onSuccess`        | 组件值上传成功事件                                                       | `(file: object, value: array) => void`                              | -           |
| `onlyCameraUpload` | 仅允许拍照上传，该功能目前仅支持钉钉手机端，开启后「非钉钉手机端」会自动禁用上传功能。                     | `boolean`                                                           | `false`     |
| `size`             | 表单组件尺寸                                                          | [Size](/zh/open/yida/components/interface#size)                     | `'medium'`  |
| `timeout`          | 设置上传超时，单位 ms                                                    | `number`                                                            | `0`         |
| `tips`             | 表单组件描述信息，展示在控件下方                                                | `string`                                                            | -           |
| `type`             | 设置上传类型，仅 PC 端有效                                                 | `'normal' \| 'drag' \| 'card'`                                      | `'normal'`  |
| `validation`       | 表单组件校验设置，具体使用详见[表单校验文档](/zh/open/yida/guide/concept/validation) | [Validation\[\]](/zh/open/yida/components/interface#validation)     | `[]`        |
| `value`            | 默认值                                                             | `array`                                                             | -           |
| `withCredentials`  | 设置是否允许请求携带 cookie                                               | `boolean`                                                           | `false`     |
| `wrapperColOffset` | 设置表单组件的偏移位置，设置值为栅格值，1代表1/24                                     | `number`                                                            | `0`         |
| `wrapperColSpan`   | 设置表单组件的占位宽度，设置值为栅格值，1代表1/24                                     | `number`                                                            | `0`         |