yicangzongtai_app_240321/pages/task/components/submitVideo - 副本.vue

<template>
	<view class="task-form-item form-item-media">
		<view class="form-lable">
			<text><text class="form-must" v-if="rule && rule.required">* </text>视频:</text>
			<text class="form-media-num">({{videos.length}}/{{num}})</text>
		</view>
		<view class="form-img-video">
			<view v-if="videos.length <= num " class="updata-btn img-video-item" @click.stop="onChooseVideo()">
				<text class="iconfont_yige">&#xe69f;</text>
				<text>请上传视频</text>
			</view>
			<view class="img-video-box img-video-item" v-for="(item,index) in videos">
				<view class="video-cover" @click.stop="onplay(item)" />
				<view class="del-img-video iconfont_yige" @click.stop="delVldeo(index)">&#xe867;</view>
				<video :show-center-play-btn="false" :controls="false" class="img-video" :src="item"
					v-if="!checkPage"></video>
			</view>
		</view>
		<uni-popup ref="videoPlayRef" maskBg="rgba(0, 0, 0,.7)" @change="popupChange">
			<view class="video-play" style="width: 100vw;">
				<video autoplay v-if="playVideoUrl" style="width: 100%;max-height: 60vh;" :src="playVideoUrl" />
			</view>
		</uni-popup>
	</view>
</template>
<script>
	import {
		getcheckBigFile_Api,
		setUpload_tag_Api,
		getMargeTag_Api
	} from "@/api/task.js"
	import {
		getFileMd5,
		cutFile
	} from "@/utils/tool.js"
	export default {
		name: 'submitVideo',
		model: {
			prop: ['videos'],
			event: ['onChange']
		},
		props: {
			checkPage: {
				type: Boolean,
				default: false
			},
			num: {
				type: Number,
				default: 1
			},
			rule: {
				type: Object,
				default: null
			},
			videos: {
				type: Array,
				default: () => [],
				require: true
			},
		},
		data() {
			return {
				fullscreenLoading: false,
				Storage_key: 'partUploadData',
				File_V: null,
				tempFilePath: null,
				playVideoUrl: '',

				uploadFileObj: {
					tagsList: [],
					uploadUrls: []
				},
			}
		},

		watch: {
			fullscreenLoading: {
				handler(newL, oldL) {
					if (newL) {
						uni.showLoading({
							title: '上传视频中',
							mask: true
						})
					} else {
						uni.hideLoading()
					}
				},

			}
		},
		mounted() {

		},
		methods: {
			popupChange(e) {
				if (!e || !e.show) {
					this.playVideoUrl = null;
				}
			},
			// 播放视频
			onplay(url) {
				this.playVideoUrl = url;
				this.$nextTick(() => {
					this.$refs.videoPlayRef.open();
					this.videoContext = uni.createVideoContext('myVideo');
					this.videoContext.play()
				})
			},
			delVldeo(index) {
				this.videos.splice(index, 1);
			},
			onChooseVideo() {
				try {
					uni.removeStorageSync(this.Storage_key);
				} catch (e) {
					// error
				}
				uni.chooseVideo({
					sourceType: ['camera', 'album'],
					compressed: true, // 压缩
					success: res => {
				console.log('fileMd5 = ', res)
						this.File_V = res.tempFile;
						this.tempFilePath = res.tempFilePath;
						this.onCheck_Md5(res.tempFilePath, res.tempFile)

					},
					fail: err => {
						console.log('fileMd5 err = ', err)
					}
				});
			},
			async onCheck_Md5(tempFilePath, File) {
				const fileMd5 = await getFileMd5(File);
				console.log('fileMd5 = ', fileMd5)
				if (!fileMd5) return
				this.fullscreenLoading = true
				getcheckBigFile_Api({
					fileMd5: fileMd5,
					originalName: File.name
				}).then(res => {
					const data = res.data;

					if (!data.bigStatus) {
						this.saveFileChunk(File, tempFilePath, fileMd5, data.uploadId);
					} else {
						this.unloadVideos(data.url);
					}

				}).catch(err => {
					console.log('b = ', err)
					this.fullscreenLoading = false;
					uni.showToast({
						title: '上传失败',
						icon: 'none'
					})
				})
			},

			// 保存文件片段到后台
			async saveFileChunk(File, tempFilePath, fileMd5, uploadId) {
				cutFile(File).then(cutFileList => {
					console.log('fileMd5 = ', cutFileList)
					let num = 0;
					let list = [];
					let uploadFileObj = []
					for (let i = 0; i < cutFileList.length; i++) {
						console.log('fileMd5 = ', i)
						let p = new Promise((resolve, reject) => {
							const item = cutFileList[i];
							uni.uploadFile({
								url: this.$mConfig.baseUrl + '/common/upload-tag',
								formData: {
									file: item.blob,
									fileMd5: fileMd5,
									uploadId: uploadId,
									curPartSize: item.blob.size,
									partNumber: item.partNumber
								},
								success: (uploadFileRes) => {
									const JSON_data = uploadFileRes.data;
									const data = JSON.parse(JSON_data);
									const tag = data.data.tag;
									uploadFileObj.push(tag)
									resolve()

								},
								fail(fail) {
									reject()
								}
							})
						});
						list.push(p)
					}

					Promise.all(list).then(() => {
						this.bigFileMergeFun(uploadFileObj, fileMd5, uploadId)
					}).catch(() => {
						this.fullscreenLoading = false;
						uni.showToast({
							title: '上传失败',
							icon: 'none'
						})
					})
				})
			},


			// 合并
			bigFileMergeFun(uploadFileObj, fileMd5, uploadId) {
				console.log('bigFileMergeFun = ', uploadFileObj)
				let param = {
					fileMd5: fileMd5,
					tagsList: uploadFileObj,
					uploadId: uploadId
				}
				getMargeTag_Api(param).then(res => {
				console.log('getMargeTag_Api = ', res)
					const url = res.data.url;
					this.unloadVideos(url)
				}).catch(err => {
					this.fullscreenLoading = false;
					uni.showToast({
						title: '上传失败',
						icon: 'none'
					})
				})
			},

			unloadVideos(url) {
				this.videos.push(url)
				this.fullscreenLoading = false;
				uni.showToast({
					title: '上传成功',
					icon: 'none'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '~./submint.scss';

	.video-cover {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 2;
	}
</style>