首先创建一个 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>
最终样子