跳转到内容

图片裁剪上传

使用el-upload,el-image-viewer组件封装,用于对图片进行裁剪处理后再执行上传操作。基于图片控件编辑器进行扩展,编辑器样式代码名称为:PICTURE_CROPPING

示例效果

输入参数

名称说明类型默认值
value编辑器值String-
controller编辑器控制器对象new RequiredProp(Object as PropType<C>)-
data容器数据,通常为表单数据,表格行数据,面板数据new RequiredProp(Object as PropType<IData>)-
disabled是否禁用{ type: Boolean }false
readonly是否只读{ type: Boolean, default: false }false
controlParams容器控件参数,一般是指表单部件控件参数、表格控件参数、面板控件参数{ type: Object, required: false }-

事件

名称说明类型
change值变更事件{_value:V, _name?:string, _ignore?:boolean}

编辑器参数

名称说明类型默认值
cropwidth设置图片截取区域的宽度number400
cropheight设置图片截取区域的高度number200
autopreview当输入参数 readonly 为 true 并且该参数为 true 时。加载完图片后将自动调整图片大小达到预览态,且鼠标移入后不显示图片处理工具栏booleanfalse
acceptel-upload组件的accept属性stringundefined
uploadparams上传参数,图片上传时,用于计算上传路径stringundefined
exportparams下载参数,图片下载时,用于计算下载路径stringundefined
osscat用于计算上传和下载路径的OSS参数stringundefined
infomap上传文件信息的映射规则字符串,用于将上传成功后返回的文件数据转换为保存数据所需格式。格式为'源键:目标键;源键2:目标键2'。示例:映射规则('filesize:size;fileext:ext'),源对象({filesize:'10000', fileext:'.gif'}),转换结果({size:'10000', ext:'.gif'})stringundefined
readonly设置编辑器是否为只读态booleanfalse
appentitytag在应用启用下载授权时,用于指定当前文件所属实体。该参数值会作为验证下载权限的依据。配置格式为(应用代码名称.实体代码名称),示例:web.masterstringundefined
datafieldtag在应用启用下载授权时,用于指定当前文件所关联的数据属性。完成配置后,将自动从容器数据(涵盖表单数据、表格行数据、面板数据)、上下文环境以及视图参数中获取该属性的实际值,将其作为验证下载权限的依据stringundefined
未来已来,立即拥抱应用融合的力量
Released under the MIT License.