uniapp vue3 上传视频组件封装

首先创建一个 components 文件在里面进行组件的创建

下面是 vvideo组件的封装也就是图片上传组件只是我的命名是随便起的

<template><!-- 上传视频 --><view class="up-page"><!--视频--><view class="show-box" v-for="(item1, index1) in videoList" :key="index1"><video class="full" :src="item1"></video><view  class="delect-icon" @tap="delectVideo(index1)"><image class="full" :src="clearIcon" mode=""></image></view></view><view v-if="VideoOfImagesShow" @tap="chooseVideoImage" class="box-mode"><image class="full" :src="selectfile" mode=""></image></view></view></template><script setup>  
import { ref } from 'vue';  // 假设sourceType是一个外部定义或在其他地方已经处理的数组，这里我们直接使用  
// 如果它是动态的，你可能需要将其也转换为ref  
const sourceType = ref([['camera'], ['album'], ['camera', 'album']]);  // 创建响应式数据  
const clearIcon = ref('../../static/xxx.png');  
const selectfile = ref('../../static/jiahao.png');  
const VideoOfImagesShow = ref(true);  
const imageList = ref([]);  
const videoList = ref([]);  
const sourceTypeOptions = ref(['拍摄', '相册', '拍摄或相册']);  
const sourceTypeIndex = ref(2);  
const cameraList = ref([{  value: 'back',  name: '后置摄像头',  checked: 'true'  
}, {  value: 'front',  name: '前置摄像头'  
}]);  
const cameraIndex = ref(0);  
const maxCount = ref(9);  // 方法  
function chooseVideoImage() {  uni.showActionSheet({  title: '选择上传类型',  itemList: ['视频'], // 注意：这里我添加了'图片'选项，你可能需要调整你的逻辑来处理它  success: res => {  if (res.tapIndex === 0) {  chooseVideo();  } else if (res.tapIndex === 1) {  // 假设你有一个chooseImages方法来处理图片选择  // chooseImages();  console.log('选择图片');  }  }  });  
}  function chooseVideo() {  uni.chooseVideo({  maxDuration: 60,  count: maxCount.value,  camera: cameraList.value[cameraIndex.value].value,  sourceType: sourceType.value[sourceTypeIndex.value],  success: res => {  videoList.value = [...videoList.value, res.tempFilePath];  if (imageList.value.length + videoList.value.length === maxCount.value) {  VideoOfImagesShow.value = false;  }  console.log(videoList.value);  }  });  
}  function delectVideo(index) {  uni.showModal({  title: '提示',  content: '是否要删除此视频',  success: res => {  if (res.confirm) {  videoList.value.splice(index, 1);  VideoOfImagesShow.value = !(imageList.value.length + videoList.value.length >= maxCount.value);  }  }  });  
}  
</script><style lang="scss">/* 统一上传后显示的盒子宽高比 */.box-mode {width: 50vw;height: 60vw;border-radius: 8rpx;overflow: hidden;}.full {width: 100%;height: 100%;}.up-page {display: flex;flex-wrap: wrap;display: flex;width: 100%;.show-box:nth-child(3n){margin-right: 0;}.show-box {position: relative;margin-bottom:4vw;margin-right: 4vw;@extend .box-mode;.delect-icon {height: 40rpx;width: 40rpx;position: absolute;right: 0rpx;top: 0rpx;z-index: 1000;}}}</style>

直接在页面引用

	<view class="videobox"><view class="example-body"><!-- <uni-file-picker limit="9"  file-mediatype="video" title="最多选择9个视频"></uni-file-picker> --><div>选择视频-最多只能选择九个</div><vvideo></vvideo></view></view>

最终样子