uniapp vue3 上传视频组件封装

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

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

javascript 复制代码
<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>

直接在页面引用

html 复制代码
	<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>
		

最终样子

相关推荐
2501_9160074721 分钟前
iOS 26 软件性能测试 新版系统下评估全流程 + 多工具辅助方案
android·macos·ios·小程序·uni-app·cocoa·iphone
xiaohe060144 分钟前
🎉 Uni ECharts 2.0 正式发布:原来在 uni-app 中使用 ECharts 可以如此简单!
uni-app·echarts
00后程序员张1 小时前
Swoole HTTPS 实战,在生产环境部署、性能权衡与排查流程
后端·ios·小程序·https·uni-app·iphone·swoole
2501_915909065 小时前
iOS App 上架全流程详解:证书配置、打包上传、审核技巧与跨平台上架工具 开心上架 实践
android·ios·小程序·https·uni-app·iphone·webview
2501_915106325 小时前
iOS 26 系统流畅度测试实战分享,多工具组合辅助策略
android·macos·ios·小程序·uni-app·cocoa·iphone
2501_915918415 小时前
开发 iOS 应用全流程指南,环境搭建、证书配置与跨平台使用 开心上架 上架AppStore
android·ios·小程序·https·uni-app·iphone·webview
2501_9159214313 小时前
iOS 是开源的吗?苹果系统的封闭与开放边界全解析(含开发与开心上架(Appuploader)实战)
android·ios·小程序·uni-app·开源·iphone·webview
2501_9159090617 小时前
原生 iOS 开发全流程实战,Swift 技术栈、工程结构、自动化上传与上架发布指南
android·ios·小程序·uni-app·自动化·iphone·swift
2501_9151063217 小时前
Comodo HTTPS 在工程中的部署与排查实战(证书链、兼容性与真机抓包策略)
网络协议·http·ios·小程序·https·uni-app·iphone
2501_9159090617 小时前
苹果软件混淆与 iOS 代码加固趋势,IPA 加密、应用防反编译与无源码保护的工程化演进
android·ios·小程序·https·uni-app·iphone·webview