图片上传

介绍

基本表单组件，用于用户上传图片。

API

Props

Props 属性

参数名	描述	类型	默认值
status	状态	'default' |'disabled'|'readonly'|'hide'	'default'
title	标题	string	'图片上传'
showLabel	显示标题	boolean	true
width	字段占比	'25%'|'50%'|'75%'|'100%'	'100%'
labelWidth	标签宽度	Object	-
value	默认值	string	-
name	数据字段	string	-
api	API绑定	string	-
listType	列表样式	'text'|'picture'|'picture-card'	'text'
draggable	拖拽	boolean	false
dragDesc	拖拽提示信息	string	-
btnTitle	按钮内容	string	-
btnType	按钮类型	'primary'|'default'|'outline'	'default'
directory	文件夹上传	boolean	false
multiple	多选	boolean	false
fileName	上传文件名	'files'|'file'	'files'
extraData	额外数据	Function	-
headers	头部信息	Function	-
setUrl	文件预览地址	Function	-
maxFileNum	最大上传文件个数	number	-
maxFileSize	单文件最大上传大小(MB)	number	-
withCredentials	是否允许请求cookie	boolean	false
autoUpload	自动上传	boolean	true
accept	上传文件类型	string	-
compress	上传前压缩	boolean	true
compressQuality	压缩质量	number	0.6
compressSize	上传图片超过此大小则开启压缩（MB）	number	2
enablePreview	开启预览	boolean	false
previewEvent	预览事件	Function	-
enableDownload	开启下载	boolean	true
downloadEvent	下载事件	Function	-
baseStyle	自定义样式 ， 表格整体自定义样式	string	-
customClass	类名绑定 ， 绑定类的名称	string	-
boxStyle	盒模型 ， margin,border,padding设置	BoxStyle	-
uniqueKey	唯一标识 ， 组件的唯一标识	string	-
valueFormat	默认值数据格式	'default'|'object'	'default'
extra	补充说明	string	-
tip	气泡提醒	string	-
validate	校验	Validate	-
loop	循环， 循环渲染设置	Loop	-

注意

上传组件的 默认值 数据类型与高级中 默认值数据格式 设置有关，默认值数据格式为「默认」默认值 数据类型为 url 字符串数组，例:["/bucket/test.png", ...]。默认值数据格式为「对象数组」则 默认值 数据类型为对象数组，格式为:[{url: "xxxx", name: "xxx 文件"}, ...]

Events

事件名	描述	参数
onSuccess	上传成功时触发	ctx params:{fileItem: FileItem} loop:LoopParams
onError	上传失败时触发	ctx params:{fileItem: FileItem} loop:LoopParams
onChange	上传的文件状态发生改变时触发	ctx params:{fileItem: FileItem, fileList: FileItem[]} loop:LoopParams
onExceeLimit	上传的文件超出限制后触发	ctx params:{fileItem: FileItem, fileList: FileItem[]} loop:LoopParams
onPreview	点击图片预览时触发	ctx params:{fileItem: FileItem} loop:LoopParams
onProgress	上传中的文件进度改变时触发	ctx params:{fileItem: FileItem, ev: ProgressEvent} loop:LoopParams
onBeforeUpload	上传前	ctx file: FileItem loop:LoopParams
onBeforeRemove	移除文件前触发	ctx params: FileItem loop:LoopParams

Type

type FileItem = {
  "file":File,
  "name":string,
  "percent":number,
  "response":{
    "alert":string,
    "code":string
    "data":any,
    "msg":string
    "ts":number,
  }
  "status":string,
  "uid":string,
  "url":string,
}