yicangzongtai_app_240321/pages/task/components/submitVideo_renderjs.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="getFile()">
				<text class="iconfont_yige">&#xe69f;</text>
				<text>请上传视频</text>
			</view>
			<!-- 	<view class="img-video-box img-video-item" v-for="(item , index) in photos_list"
				@click.stop="onBigImg(index)">
				<view class="del-img-video iconfont_yige" @click.stop="delphotos(index)" v-if="!checkPage">&#xe867;
				</view>
				<image class="img-video" :src="item" mode="aspectFit"></image>
			</view> -->
			<view class="img-video-box img-video-item" v-for="(item,index) in videos" :key="`video_${index}`"
				@click.stop="onplay(item)">
				<view class="del-img-video iconfont_yige" v-if="!checkPage" @click.stop="delVldeo(index)">&#xe867;
				</view>
				<image class="img-video" :src="item + '?x-oss-process=video/snapshot,t_0,f_jpg'" mode="aspectFit" />
			</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 module="uploadBigFile" lang="renderjs">
	export default {
		mounted() {
			// this.create()
		},
		methods: {
			onFile(file) {
				console.log('aaa = ', file)
			}
		}
	}
</script>

<script>
	import {
		getcheckBigFile_Api,
		setUpload_tag_Api,
		getMargeTag_Api
	} from "@/api/task.js"
	import {
		getFileMd5,
		cutFile
	} from "@/utils/tool.js"
	import SparkMD5, {
		hash
	} from 'spark-md5'
	import {
		uplaodVideo
	} from "@/utils/uplaodVideo"
	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 {
				uploadingLoading: false,
				Storage_key: 'partUploadData',
				File_V: null,
				tempFilePath: null,
				playVideoUrl: '',
			}
		},

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

			}
		},
		mounted() {

		},
		methods: {
			getFile() {
				uni.chooseVideo({
					sourceType: ['camera', 'album'],
					compressed: false, // 压缩
					success: res_file => {
						console.log('res_file = ', res_file)
						this.uploadBigFile.onFile(res_file)
					}
				})

			},
			popupChange(e) {
				if (!e || !e.show) {
					this.playVideoUrl = null;
				}
			},
			// 播放视频
			onplay(url) {
				try {
					this.playVideoUrl = url;
					this.$refs.videoPlayRef.open();
					this.$nextTick(() => {
						try {
							this.videoContext = uni.createVideoContext('myVideo');
							this.videoContext.play();
						} catch (e) {
							console.log('onpssssslay = ', e)
							//TODO handle the exception
						}
					})
				} catch (e) {
					console.log('onplay = ', e)
					//TODO handle the exception
				}
			},
			delVldeo(index) {
				this.videos.splice(index, 1);
			},
			onChooseVideo() {

				try {
					let that = this;
					uni.chooseVideo({
						sourceType: ['camera', 'album'],
						compressed: false, // 压缩
						success: res_file => {
							console.log('res_file = ', res_file)
							const max_size = 200 * 1024 * 1024;
							if (res_file.size > max_size) {
								uni.showToast({
									title: '最大上传200M视频',
									icon: 'none'
								})
								return
							};
							return
							this.uploadingLoading = true
							plus.io.resolveLocalFileSystemURL(res_file.tempFilePath, (entry) => {
								entry.file((ent) => {
									// 获取文件名
									plus.io.getFileInfo({
										filePath: res_file.tempFilePath,
										success: res_ => {
											// 获取文件的MD5
											try {
												// 检查是否上传过
												getcheckBigFile_Api({
													fileMd5: res_.digest,
													originalName: ent.name
												}).then(res => {
													const data = res.data;
													console.log('data = ',
														data)
													if (!data.bigStatus) {
														that.saveFileChunk(
															res_file,
															res_
															.digest,
															data
															.uploadId);
													} else {
														that.unloadVideos(
															data.url);
													}

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

												})
											} catch (e) {
												this.uploadingLoading =
													false;
												uni.showToast({
													title: '上传失败',
													icon: 'none'
												})

											}
										}

									})

								})
							})
						},
						fail: err => {
							this.uploadingLoading = false;
						}
					});
				} catch (e) {
					console.log('fileMd5 e= ', e)
					//TODO handle the exception
				}
			},


			// 保存文件片段到后台
			saveFileChunk(File, fileMd5, uploadId) {

				uni.uploadFile({
					url: this.$mConfig.baseUrl + `/common/upload-all?fileMd5=${fileMd5}&uploadId=${uploadId}`,
					filePath: File.tempFilePath,
					name: 'file',
					success: (uploadFileRes) => {
						const JSON_data = uploadFileRes.data;
						const data = JSON.parse(JSON_data);
						const url = data.data.url;
						this.unloadVideos(url)

					},
					fail: err => {
						this.uploadingLoading = false;
						uni.showToast({
							title: '上传失败',
							icon: 'none'
						})
					}
				});
			},

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

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