yicangzongtai_app_240321/components/videoAndImg/unVideoAndimg.vue

<template>
	<view style="display: flex; flex-wrap: wrap; ">
		<!--图片-->
		<view  style="display:flex; border-radius: 20rpx;  ">
			<view v-for="(item,index) in imageList" :key="index">
				<view style="position:relative;width:250rpx;height:200rpx; " >
					<image style="width:250rpx;height:200rpx; border-radius: 20rpx; " :src="item" :data-src="image" @tap="previewImage"></image>
						<view style="position:absolute; right: 0rpx; top: -10rpx;" @tap="delect(index)">
							<view style="width:34rpx;height:34rpx;background-color: #EF3124; border-radius: 50%; line-height: 34rpx; text-align: center;font-size:10rpx !important; color: #FFFFFF;" class="iconfont" mode="">&#xe603;</view>
						<!--这个图标是指，图片或者视频上传成功了，点击右上角叉号（也就是这个图标）可以删除 这里自己找一个合适的替换掉就好-->
					</view>	
				</view>
			</view>
			<!--视频-->
			<view v-for="(item1, index1) in srcVideo" :key="index1">
				<view style="position:relative;width:250rpx;height:200rpx;  border-radius: 20rpx;">
					<video style="width:250rpx;height:200rpx;" :src="item1"></video>
					<view style="position:absolute; right: -10rpx; top: -10rpx;" @tap="delectVideo(index1)">
					<view style="width:34rpx;height:34rpx;background-color: #EF3124; border-radius: 50%; line-height: 34rpx; text-align: center;font-size:10rpx !important; color: #FFFFFF;" class="iconfont" mode="">&#xe603;</view>
					</view>
				</view>
			</view>
				<view v-if="VideoOfImagesShow" @tap="chooseVideoImage" style=" border-radius: 20rpx; width: 250rpx;height:200rpx;background-color: #F1F1F1;display:flex; justify-content: center; align-items: center; flex-direction: column;">
				<view class="iconfont " style="font-size: 70rpx;" mode="">&#xe686;</view>
				<view  style="font-size:30rpx;">拍照/视频</view>
			</view>
		</view>
	</view>
	

	
</template>

<script>
var sourceType = [['camera'], ['album'], ['camera', 'album']];
export default{
	data(){
		return {
			VideoOfImagesShow: true, // 页面图片或视频数量超出后，拍照按钮隐藏
			imageList: [], //存放图片的地址
			srcVideo: [],//视频存放的地址
			sourceType: ['拍摄', '相册', '拍摄或相册'],
			sourceTypeIndex: 2,
			cameraList: [{ value: 'back', name: '后置摄像头', checked: 'true' }, { value: 'front', name: '前置摄像头' }],
			cameraIndex: 0,//上传视频时的数量
		}
	},
	onUnload() {
		(this.imageList = []),(this.sourceTypeIndex = 2),(this.sourceType = ['拍摄','相册','拍摄或相册']);
	},
	methods:{
		//点击上传图片或视频
		chooseVideoImage(){
			uni.showActionSheet({
				title: '选择上传类型',
				itemList: ['图片', '视频'],
				success: res => {
					console.log(res);
					if (res.tapIndex == 0) {
						this.chooseImages();
					} else {
						this.chooseVideo();
					}
				}
			});
		},
		//上传图片
		chooseImages(){
			uni.chooseImage({
				count:4, //默认是9张
				sizeType:['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera'], //从相册选择
				success:res=>{
					this.imageList = this.imageList.concat(res.tempFilePaths);
					//console.log(this.imageList)
					if(this.imageList.length == 4){
						this.VideoOfImagesShow = false; //图片上传数量和count一样时，让点击拍照按钮消失
					}
				}
			})
		},
		//上传视频
		chooseVideo(index){
			uni.chooseVideo({	
				maxDuration: 10,//拍摄视频最长拍摄时间，单位秒。最长支持 60 秒
				count: 4,
				camera: this.cameraList[this.cameraIndex].value,//'front'、'back'，默认'back'
				sourceType: sourceType[this.sourceTypeIndex],
				success:res =>{
					this.srcVideo = this.srcVideo.concat(res.tempFilePath);
					if (this.srcVideo.length == 4) {
						this.VideoOfImagesShow = false;
					}
					console.log(this.srcVideo);
				}
			})
		},
		//预览图片
		previewImage: function(e){
			var current = e.target.dataset.src;
			uni.previewImage({
				current: current,
				urls: this.imageList
			});
		},
		// 删除图片
		delect(index) {
			uni.showModal({
				title: '提示',
				content: '是否要删除该图片',
				success: res => {
					if (res.confirm) {
						this.imageList.splice(index, 1);
					}
					if (this.imageList.length == 4) {
						this.VideoOfImagesShow = false;
					} else {
						this.VideoOfImagesShow = true;
					}
				}
			});
		},
		// 删除视频
		delectVideo(index) {
			uni.showModal({
				title: '提示',
				content: '是否要删除此视频',
				success: res => {
					if (res.confirm) {
						this.srcVideo.splice(index, 1);
					}
					if (this.srcVideo.length == 4) {
						this.VideoOfImagesShow = false;
					} else {
						this.VideoOfImagesShow = true;
					}
				}
			});
		},
	}
}

</script>

<style lang="scss" scoped>

</style>