uni-app小程序实现视频压缩及上传

梦里梦外; 2023-01-20 14:53 8阅读 0赞

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

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

选择视频：

![20210513152447822.png][]

上传视频后：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70][]

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

### 全部代码： ###

<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的直接上传

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

[20210513152447822.png]: /images/20221021/415cdc29dd574374a70370592bafc880.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70]: /images/20221021/a819cc115c9b4490a30faf2677ebb295.png