下面两张图是中的第一张图是选择视频进行上传，第二张图是视频上传后的展示操作

这里是有完成选择视频上传压缩，展示

 

选择视频：

上传视频后：

 

这个整体的思路是选择视频压缩并上传

全部代码：

<template>
	<view class="page quenaire">
		<view class="question-box">
			<view class="videoShow" v-if="question.type == 'video'">
				<view class="videoBtn" v-if="videoSrc != ''"> 
					<video style="width:560rpx;" :src="videoSrc"></video>
					<image src="../../static/imgs/pagesTask/audiodel.png" mode="widthFix" @click="handleVideoDel"></image>
				</view>
				<view class="videoUpShow showpic"  v-if="videoSrc == ''">
					<image src="../../static/imgs/pagesTask/video_upload.png" @click="videoAdd"></image><br/>
					<text>点击上传视频</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				content: '',
				videoContent: '',
				compress: true,
				videoSrc: '',
				cameraList: [{
						value: 'back',
						name: '后置摄像头',
						checked: 'true'
					},
					{
						value: 'front',
						name: '前置摄像头'
					},
				],
				cameraIndex: 0,
			}
		},
		methods: {
			handleVideoDel(){
				this.videoSrc = '';
				this.videoContent = '';
			},
			videoAdd(){
				uni.chooseVideo({
					maxDuration: 60,   // 最大为60秒
					count: 1,
					compressed: true,
					camera: this.cameraList[this.cameraIndex].value,
					sourceType: ['album','camera'],
					success: (res) => {
						let videoFile = res.tempFilePath;
						this.videoSrc = res.tempFilePath;
						console.log("res",res);
						if (this.compress && (res.size / 10240 > 1025)) {
							console.log("压缩")
							this.videoCompress(res.tempFilePath);
							console.log("压缩后")
						} else {
							this.videoUpload(res.tempFilePath);
						}
					}
				})
			},
			videoCompress(tempFilePath){
				uni.showLoading({
					title: '压缩中...'
				});
				var that = this;
				uni.compressVideo({
					src: tempFilePath,  
					quality: 'low', //'low':低，'medium':中，'high':高  
					success: function (res){            
						console.log('压缩后',res)
						that.videoUpload(res.tempFilePath);
					},
					fail: function (err) {
						uni.showToast({  
							title:'视频压缩失败',  
							icon:'none'
						},2000)
					}
				})
			},
			videoUpload(tempFilePath){
				uni.showLoading({
					title: '上传中...'
				});
				const uploadTask = uni.uploadFile({
					url: this.baseUrl,   // 自己文件上传的路径
					method:"POST",
					filePath: tempFilePath,
					name: 'file',
					success: (res) => {    
						this.videoContent = JSON.parse(res.data).result.visiturl
						let resMessage = JSON.parse(res.data).message;
						if(JSON.parse(res.data).result.visiturl){
							// uni.hideLoading();
							uni.showToast({
								title: resMessage,
								icon: 'none'
							})
						}
					},
					fail: (err) => {
						console.log(err);
						uni.hideLoading();
						uni.showToast({
							title: err,
							icon: 'none'
						})
						reject(err);
					},
					complete: () => {
					}
				})
				uploadTask.onProgressUpdate((res) => {
					uni.showLoading({
						title: '上传中' + res.progress + '%'
					});
					if (res.progress == 100) {
						uni.hideLoading();
					}
				});
			},
		},
	}
</script>

<style lang="less" scoped>
</style>

 

这里是当图片大于10M时需要压缩，小于10M的直接上传

 

具体有什么问题欢迎留言！！！