Skip to content
On this page
你当前查看的文档是tmui3.2.0(已不再支持NVUE)
[tmui3.1.x nvue点我] [tmui4.x uniappx原生开发代替nvue]

表单组件

视频上传 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>

🌶️ 兼容性

平台兼容

H5uniAPP小程序version
☑️☑️☑️☑️

🌱 参数

参数名类型默认值描述
maxCountnumber9最大的可上传数量
roundstring|number10图片项目圆角。
urlstring"https://mockapi.eolink.com/LRViGGZ8e6c1e8b4a636cd82bca1eb15d2635ed8c74e774/admin/upload_pic/"上传地址
namestring"file"上传到服务器的名称字段
headerRecord<string, any> | nullnull上传到服务器的头文件
formDataRecord<string, any> | nullnull额外的表单数据。
imgHeightstring"110"图片高,此处不可使用%单位
columnnumber5一行显示几列
okFileIsDeletebooleantrue上传成功的文件是否允许删除
uploadingFileIsDeletebooleantrue上传中的文件是否允许删除
maxFileSizenumber1024102430图片上传的限制大小,默认是30mb(可以开启压缩,最后可能比较小)
maxDurationnumber30最大拍摄时长不能超过60秒默认建议30秒
camerastring'back'摄像头类型,前置还是后置
statusCodenumber200开发者服务器响应码,默认是200表示上传成功.
modelValueArray<Record<string, any> | string>()=>[]等同v-model
rangUrlstring'url'用于回显时,如果你提供的数组数据是对象,需要指定图片的地址.同时该对象数据会被保留到response字段中
beforeDelfunc|booleantrue图片被删除时触发如果返回Promise<false>删除失败否则成功类型null
beforeCompletefunc|booleantrue你需要原路返回参数提供的itemitem可以自行修改响应内容,响应类型这样可以自己根据服务的内容判断是成功还是失败或者没有权限。修改其中的status来达到成功还是失败TMUPLOAD_PHOTO_STATUS
autoStartbooleantrue是否自动上传
sourceTypeArray<"album" | "camera">()=>["album","camera"]图片来源同官方的sourceType:'album','camera'
compressbooleantrue是否压缩
addPosstring"after"添加图片的位置'before'出现在前面'after'出现在后面
modestring"scaleToFill"图片展示的缩放模式同官方.

🌹 事件

事件名参数返回数据描述
complete名称:-,列表数据,-每次全部上传完时触发
change名称:-,列表数据,-变化时触发
delete名称:-,列表数据,-图片被删除时触发
preview--点击项目预览视频,有的回显视频可能需要授权播放,返回的可能是个视频图片,因此你需要通过事件自行创建预览窗口.
update:modelValue--同步文件列表。

🌽 slot插槽

插槽名数据描述
default-上传按钮插槽

🥗 ref方法

方法名参数返回值描述
startUpload---
choose---