下面两张图是中的第一张图是选择视频进行上传,第二张图是视频上传后的展示操作
这里是有完成选择视频上传压缩,展示
选择视频:
上传视频后:
这个整体的思路是选择视频压缩并上传
全部代码:
<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的直接上传
具体有什么问题欢迎留言!!!