龙马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属性必填

基础用法

  <template>
    <div>
        <el-form>
            <lm-up-img :file-list="imgList" action="http:xxx.com/upload"/>
            <lm-up-file :file-list="fileList" action="http:xxx.com/upload"/>
        </el-form>      
    </div>
</template>
<script>
    export default {
        data(){
            return{
                fileList:[],//文件
                imgList:[],//图片
            }
        }
    }
</script>

文件和图片上传组件公用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	图片删除按钮

代码示例

<template>
    <div>
        <el-form ref="uploadMaterial"  label-width="120px" size="small">
            <el-row>
                <lm-up-img 
                        label="项目鸟瞰图" 
                        :fileList="fileList" 
                        :otherData="{bucketName:'project'}" 
                        @fileSuccess="v=>canICommitImg=v.canICommitImg" 
                        @beforeUpload="canICommitImg=false" multiple 
                        @delFile="canICommitImg=true"
                />
            </el-row>
            <el-row>
                <lm-up-file  
                        :hiddenCamera="true" 
                        :file-list="fileList" 
                        :other-data="{bucketName:'material'}" 
                        @fileSuccess="v=>canICommit=v.canICommit" 
                        @beforeUpload="canICommit=false" 
                        label="上传资料：" 
                        fileAccept="*"  
                        :file-list-style="{'padding-left':'40px'}"
                        @delFile="canICommitImg=true"
                >
                    <template #filePrev="{fileViewForm,file}">
                        <el-row style="width:40%;" class="fileViewFormRow">
                            <lm-input width="200" :span="24" label="文件名称：" v-model="file.name" margin-bottom="0"/>
                        </el-row>
                    </template>
                </lm-up-file>
            </el-row>
        </el-form>
        <div>
            <el-button @click="save">保存</el-button>
        </div>
    </div>
   
</template>
<script>
    import axios from 'axios'
    export default {
        data() {
            return {
                fileList:[],//文件
                canICommit:true,//是否可以提交文件
                imgList:[],//图片
                canICommitImg:true,//是否可以提交图片
            }
        },
        methods: {
            //确定上传
            async save(){
                let {fileList,imgList,canICommitImg,canICommit}=this
                if(!canICommit){
                    this.$message.warning('请等待文件上传完成')
                    return
                }
                if(!canICommitImg){
                    this.$message.warning('请等待文件上传完成')
                    return
                }
                let res=await axios.post('/save',{fileList,imgList})
                code===0 ? this.$message.success(res.data.msg) : this.$message.warning(res.data.msg)
                
            }
        },
    }
</script>

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