uploadFileCl uploadFileOSS
该组件默认为透明，高度和宽度充满父元素，嵌入父元素的标签内即可
npm install chengla-web-ui
imgWidth: type: number|string // 图片的宽 必须和高同时出现
imgHeight: type: number|string // 图片的高
sliceRange: type: number, // 切片大小 MB
multiple: type: Boolean, // 是否多选 默认为false
type: type: String, // 上传类型 img, text, video 默认为img
clearInput: type: Number, // 清除input的value 传一个数字即可 +new Date()
uploadBucket: type: String 上传方式 使用uploadFileCl组件时可不传
uploadPath type: String, // 上传地址，根据项目命名 例如辅导使用coaching
qualitytype: Number, // 图片压缩率 它必须是0和1之间的数字 默认为0.7
uploadHost: type: String, // 上传域名
videoSizeLimit?: number; // 视频的大小限制 M
allowZip: boolean; // 支持zip上传 默认 不支持
imgLimitSize: number; // img最大上传 默认 不限制 单位M
fileLimitLength: number; // 文件最大上传数量 默认10个
videoAllowType: string; // 视频上传格式限制
docAllowType: any|string[]; // 文档上传格式限制
imgAllowType: any|string[]; // 图片上传格式限制
fileSizeLimit?: number; // 视频的大小限制 M 默认5M
zipSizeLimit?: number; // zip的大小限制 M 默认10M
audioLimitSize?: number; // audio的大小限制 M 默认10M
audioLimitDuration?: number; // audio的时长限制 秒 默认60s
audioAllowType?: any|string[]; // audio格式限制
<template>
<div id="app">
<uploadFileOSS @fileMsg="fileMsg" uploadBucket="oss"></uploadFileOSS>
</div>
</template>
<script>
import uploadFileOSS from 'chengla-web-ui'
export default {
components: { uploadFileOSS },
data() {
return {
fileList: []
}
},
methods: {
fileMsg(data) {
console.log(data)
if (data.code == 200) {
this.fileList = data.info;
} else {
alert(data.msg)
}
}
}
}
<script>
messageType: any // 支持的消息类型，默认text文本，image-图片 video-视频 file-文件 link-链接 card-卡片 audio-音频
messageTypeShowIcon?: boolean // 消息类型展示icon 图标
showTimeSetting?: boolean // 是否显示间隔时间配置 默认true
textVariables?: any // 文本变量数组， 默认nickName-微信昵称 groupUser-入群用户 all-@所有人 staffNikeName-销售昵称 motto-座右铭 fulfilled-成就感话术
handleBtnShow?: boolean // 是否显示操作按钮 默认true
messageData?: any // 已添加的数据 回显
maxLimit?: number // 添加消息最大条数限制 默认5条
textMaxLenght?: number // 文本输入长度限制 默认500字
uoloadHost?: string // 上传配置地址 默认https://t-docs.orangevip.com
uploadBucket?: string // 上传方式 默认chengla 搭配 bucketNoExpire 使用
uploadPath?: string // 上传地址，根据项目区分 默认 wechat/msg
isEnterpriseWeChat?: boolean // 1.是否是企微官方 默认false
apiHost?: string // 2.接口域名
apiUrl?: any // 3.接口地址 [{name:path,name:path}]
bucketNoExpire?: boolean // 4.接口入参bucket 资源是否存档 默认false
inputDisable?: boolean // 配置时间不可编辑
timeFlag?: number // 配置时间类型
imgLimitSize?: number // img最大上传 默认 不限制 单位M
imgMaxWidth?: number // img最大width 默认0
imgMinWidth?: number // img最小width 默认0
imgHeight?: number // img height 默认0
imgWidth?: number // img width 默认0
imgMultiple?: boolean // img 是否多选 默认false
imgAllowType?: any // 图片上传格式限制
fileLimitLength?: number // 文件最大上传数量 默认10个
fileSizeLimit?: number // 文件的大小限制 M 默认5M
docAllowType?: any // 文档上传格式限制
zipSizeLimit?: number // zip的大小限制 M 默认10M
videoSizeLimit?: number // 视频的大小限制 M 默认10M
videoAllowType?: any // 视频上传格式限制
audioLimitSize?: number // audio的大小限制 M 默认10M
audioLimitDuration?: number // audio的时长限制 秒 默认60s
audioAllowType?: any // audio格式限制
platform?: string // 运行环境 qw企微
<template>
<div id="app">
<configMessage
:handle-btn-show="true"
:message-data="formSendDetailList"
:show-time-setting="true"
:max-limit="5"
:text-max-lenght="30"
:api-host="apiHost"
:api-url="apiUrl"
:bucket-noExpire="true"
@configMessageData="configMessageData"
/>
</div>
</template>
<script>
import configMessage from 'chengla-web-ui'
const apiHost = "XXX"
const apiUrl = {
"aaa": "/aaa",
"bbb": "/bbb",
}
interface MessageItem {
annex_id?: number
type: number // 消息类型 1文本 2图片 3视频 4文件 5链接 6名片 7音频
file_path: string //消息路径
file: File //消息文件
file_name: string //文件名称
file_size: number //文件大小
file_type: string //文件类型/后缀名
interval?: number //发送时间间隔
unit?: string // 时间类型 s-秒、m-分
}
const formSendDetailList = ref([])
const configMessageData = (data: Array<MessageItem>) => {
console.log(data)
}
<script>
