龙马UI lm-ui-element 图片文件上传组件

lm-ui-element 快速上手——安装使用

上一个组件：自定义弹窗组件

文件上传组件和图片上传组件虽然不是表单，但是是为表单设计的，必须放在element-ui的el-form标签中，基于element-ui的el-upload组件实现,带进度条，删除，预览功能。

请确保引入了element-ui 的 ElFrom、ElFormItem、ElUpload、ElButton、ElProgress、ElIcon 组件

若需要使用拍照功能，请确保引入element-ui的el-radio-group和el-radio组件

文件上传组件和图片上传组件支持表单状态（可编辑修改）和查看状态，只需根据条件设置is-edit属性即可

fileList属性和action属性必填

基础用法

文件和图片上传组件公用Attributes

参数	说明	类型	可选值	默认值
fileList	文件/图片数据	Array	--	--
isEdit	是否编辑状态	Boolean	--	true
drag	启用拖拽上传	Boolean	--	--
limit	文件限制数量	Number	--	--
otherData	上传附带的额外参数	Boolean	--	--
required	是否必须	Array	--	--
hiddenCamera	是否隐藏拍照	Boolean	--	true
action	上传地址	String	--	--
fileBaseUrl	文件域名	String	--	--
customPreviewImgMethod	自定义图片预览方法	Function	--	--

文件和图片上传组件Slots

name	说明
fileView	文件/图片列表内容
chooseFileBtn	选择图片/文件按钮
cameraFile	拍照的文件/图片
dragCameraBtn	拖拽时相机图标
cameraBtn	相机按钮
fileMethod	文件图片上传方式（拍照还是上传）

文件和图片上传组件Events

事件名	说明	回调参数
filePreview	图片文件预览	(file:File)
fileChange	图片文件改变	({file:File,fileList:Array})
beforeUpload	图片文件上传之前	--
fileSuccess	图片文件上传成功	({canICommit:Boolean,fileList:Array})
delFile	图片文件删除	--
fileMethodChange	拍照和上传切换	--

lm-up-file 文件上传

Attributes

参数	说明	类型	可选值	默认值
label	表单项标题	String	--	isEdit 为true时： '上传文件：，false时: '文件：'
btnText	按钮名称	String	--	选择文件
fileAccept	文件类型	String	--	.jpg,.jpeg,.png,.pdf,.webp'
toastText	提示文字	String	--	--
cameraText	相机按钮文字	String	--	点击拍照
toastColumn	相机按钮文字	String	--	点击拍照
cameraText	提示文字是否竖排	Boolean	--	--
fileListStyle	文件列表样式	Object	--	--

Slots

name	说明
filePrev	文件前置内容

lm-up-file 图片上传

图片上传组件，如果需要图片裁剪，确保引入lm-ui-element的lm-img-cropper组件。

当图片大于200kb时，默认开启图片压缩

headImg属性为true时，默认开启图片裁剪

Attributes

参数	说明	类型	可选值	默认值
label	表单项标题	String	--	isEdit 为true时： '上传图片：，false时: '图片：'
imgWidth	图片宽度	String / Number	--	120px
imgHeight	图片高度	String / Number	--	90px
compressSize	压缩尺寸	Object	--	{ width:400 }
hiddenCropper	不裁剪图片	Boolean	--	true
headImg	是否是头像	Boolean	--	--
multiple	是否多张	Boolean	--	--

Slots

name	说明
delIcon	图片删除按钮

代码示例

下一个组件：图片裁剪组件