表单组件
视频上传 TmUploadVideo
样式丰富塑造性好
🌶️ 示例
查看模拟效果+
示例模板
vue
<template>
<view>
<tm-sheet>
<tm-text font-size="36" class="text-weight-b mt-16">视频上传 TmUploadVideo</tm-text>
<view class="mb-16">
<tm-text>样式丰富塑造性好。</tm-text>
</view>
</tm-sheet>
<tm-sheet>
<tm-upload-video v-model="modelvalue2" add-pos="before" :column="3" img-height="200">
<tm-sheet round="10" width="100%" height="100%" class="flex flex-row flex-row-center-center" border-color="primary" border-width="1" margin="0" padding="0">
<tm-icon size="64" color="primary" name="camera-line"></tm-icon>
</tm-sheet>
</tm-upload-video>
</tm-sheet>
<tm-sheet>
<tm-text font-size="36" class="text-weight-b d-block mb-16">限定一个</tm-text>
<tm-upload-video :column="1" img-height="200" :max-count="1">
</tm-upload-video>
</tm-sheet>
</view>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const modelvalue2 = ref<Array<Record<string, any> | string>>(['https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4'])
</script>
🌶️ 兼容性
平台兼容
H5 | uniAPP | 小程序 | version |
---|---|---|---|
☑️ | ☑️ | ☑️ | ☑️ |
🌱 参数
参数名 | 类型 | 默认值 | 描述 |
---|---|---|---|
maxCount | number | 9 | 最大的可上传数量 |
round | string|number | 10 | 图片项目圆角。 |
url | string | "https://mockapi.eolink.com/LRViGGZ8e6c1e8b4a636cd82bca1eb15d2635ed8c74e774/admin/upload_pic/" | 上传地址 |
name | string | "file" | 上传到服务器的名称字段 |
header | Record<string, any> | null | null | 上传到服务器的头文件 |
formData | Record<string, any> | null | null | 额外的表单数据。 |
imgHeight | string | "110" | 图片高,此处不可使用%单位 |
column | number | 5 | 一行显示几列 |
okFileIsDelete | boolean | true | 上传成功的文件是否允许删除 |
uploadingFileIsDelete | boolean | true | 上传中的文件是否允许删除 |
maxFileSize | number | 1024102430 | 图片上传的限制大小,默认是30mb(可以开启压缩,最后可能比较小) |
maxDuration | number | 30 | 最大拍摄时长不能超过60秒默认建议30秒 |
camera | string | 'back' | 摄像头类型,前置还是后置 |
statusCode | number | 200 | 开发者服务器响应码,默认是200表示上传成功. |
modelValue | Array<Record<string, any> | string> | ()=>[] | 等同v-model |
rangUrl | string | 'url' | 用于回显时,如果你提供的数组数据是对象,需要指定图片的地址.同时该对象数据会被保留到response字段中 |
beforeDel | func|boolean | true | 图片被删除时触发如果返回Promise<false>删除失败否则成功类型null |
beforeComplete | func|boolean | true | 你需要原路返回参数提供的itemitem可以自行修改响应内容,响应类型这样可以自己根据服务的内容判断是成功还是失败或者没有权限。修改其中的status来达到成功还是失败TMUPLOAD_PHOTO_STATUS |
autoStart | boolean | true | 是否自动上传 |
sourceType | Array<"album" | "camera"> | ()=>["album","camera"] | 图片来源同官方的sourceType:'album','camera' |
compress | boolean | true | 是否压缩 |
addPos | string | "after" | 添加图片的位置'before'出现在前面'after'出现在后面 |
mode | string | "scaleToFill" | 图片展示的缩放模式同官方. |
🌹 事件
事件名 | 参数 | 返回数据 | 描述 |
---|---|---|---|
complete | 名称:-,列表数据, | - | 每次全部上传完时触发 |
change | 名称:-,列表数据, | - | 变化时触发 |
delete | 名称:-,列表数据, | - | 图片被删除时触发 |
preview | - | - | 点击项目预览视频,有的回显视频可能需要授权播放,返回的可能是个视频图片,因此你需要通过事件自行创建预览窗口. |
update:modelValue | - | - | 同步文件列表。 |
🌽 slot插槽
插槽名 | 数据 | 描述 |
---|---|---|
default | - | 上传按钮插槽 |
🥗 ref方法
方法名 | 参数 | 返回值 | 描述 |
---|---|---|---|
startUpload | - | - | - |
choose | - | - | - |