跳到主要内容

ImageField 上传图片

何时使用

  • 用于进行图片素材上传并提交场景;

组件示例

组件属性

属性说明类型默认值
accept

设置上传图片类型(多个以英文逗号,分隔)

string

'image/*'

autoUpload

是否自动上传,关闭后,需要手动调用 this.$('fieldId').startUpload() 开始上传

boolean

true

beforeUpload

上传前处理事件

(file: object, options: object) => void

-
behavior

表单组件显示状态

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取值为 textrender 时生效

string

-
labelTipsRender

表单组件标题提示信息自定义渲染方法,当labelTipsTypes取值为 render 时生效

(props: IComponentProps) => ReactNode

-
labelTipsText

表单组件标题提示文本信息,当labelTipsTypes取值为 text 时生效

string

-
labelTipsTypes

表单组件标题提示信息类型设置

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

'medium'

timeout

设置上传超时,单位 ms

number

0

tips

表单组件描述信息,展示在控件下方

string

-
type

设置上传类型,仅 PC 端有效

'normal' | 'drag' | 'card'

'normal'

validation

表单组件校验设置,具体使用详见表单校验文档

Validation[]

[]

value

默认值

array

-
withCredentials

设置是否允许请求携带 cookie

boolean

false

wrapperColOffset

设置表单组件的偏移位置,设置值为栅格值,1代表1/24

number

0

wrapperColSpan

设置表单组件的占位宽度,设置值为栅格值,1代表1/24

number

0

Copyright © 2024钉钉(中国)信息技术有限公司和/或其关联公司浙ICP备18037475号-4