app/pages/publish/publish.nvue

<template>
	<scroll-view
		class="prpage"
		scroll-y="true"
	>
		<view class="line"></view>
		<!-- 进度条 -->
		<view
			class="progress"
			v-if="percentCompleted != 100"
		>
			<progress
				:percent="percentCompleted"
				stroke-width="3"
				activeColor="#ef274d"
				backgroundColor="#F1F1F1"
			/>
			<text class="progress-text">视频上传中，请耐心等待~~</text>
			<image
				class="progress-img"
				mode="aspectFit"
				src="/static/images/loading-4.gif"
			/>
		</view>

		<!-- 发布主体内容 -->
		<view
			class="main-body"
			v-if="percentCompleted == 100"
		>
			<image
				class="main-body-img-m"
				v-if="tempCover"
				:src="tempCover"
				mode="widthFix"
			/>
			<image
				class="main-body-img-m"
				v-if="!tempCover"
				src="/static/images/loading-4.gif"
				mode="aspectFit"
			/>
			<view class="main-body-content">
				<view
					class="preplay-wrapper"
					@click="preview"
					@touchstart="touchstartPreplay"
					@touchend="touchendPreplay"
				>
					<image
						class="preplay-icon"
						src="/static/images/btn-play.png"
					/>
					<text class="preplay-text">预览视频</text>
				</view>
				<view
					class="choose-cover"
					@click="chooseCover"
				>
					<text class="choose-cover-text">选择封面</text>
				</view>
			</view>
			<textarea
				class="vlog-content"
				placeholder-style="color: #9798a0;"
				placeholder="添加合适的描述内容～最多60个字符"
				:value="title"
				:model="title"
				maxlength="60"
				@input="typingContent"
				confirm-type="done"
			></textarea>
			<view
				class="mbtn"
				:class="{
					'btn-publish': !publishTouched,
					'btn-publish-touched': publishTouched
				}"
				@touchstart="touchstartPublish"
				@touchend="touchendPublish"
				@click="doPublich"
			>
				<text class="btn-text">发布视频</text>
			</view>
		</view>
	</scroll-view>
</template>

<script>
import storage from '@/utils/storage.js'; //缓存
// import {
// 	graceNumber
// } from '@/utils/tools.js'
import api from '@/config/api.js';
export default {
	data() {
		return {
			upFlage: true,
			publishTouched: false,
			preplayTouched: false,
			tempFilePath: '',
			videoUrl: '',
			tempCover: '', // 视频封面
			title: '',
			width: 0,
			height: 0,
			localFile: '',
			percentCompleted: 0 // 进度
		};
	},
	onLoad(params) {
		this.upFlage = false;
		let me = this;
		let vlogInfo = storage.getVlogUserInfo();
		// 上个页面传过来的文件事件对象, 其中包含了相册中选择的视频内容
		let fileObjectEvent = JSON.parse(params.fileObjectEvent);
		console.log(fileObjectEvent);
		this.localFile = fileObjectEvent.tempFilePath;
		let times = new Date().getTime();
		var userId = vlogInfo.id;
		let nickname = vlogInfo.nickname;

		let serverUrl = api.vlog;
		const uploadTask = uni.uploadFile({
			filePath: fileObjectEvent.tempFilePath,
			url: serverUrl + '/upload',
			name: 'file',
			formData: {
				filetype: 'video'
			},
			header: {
				headerUserId: userId,
				headerUserToken: storage.getVlogToken()
			},
			success: (f) => {
				console.log(f);
				let jsondata = f.data;
				let data = JSON.parse(jsondata);
				let videoUrl = data.data;
				me.videoUrl = videoUrl;
				me.width = fileObjectEvent.width;
				me.height = fileObjectEvent.height;
			}
		});

		uploadTask.onProgressUpdate((res) => {
			console.log('上传进度' + res.progress);
			// console.log('已经上传的数据长度' + res.totalBytesSent);
			// console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);
			// 显示进度
			// let percentCompleted = Math.round(
			// 	(res.progress * 100) / res.total
			// );
			me.percentCompleted = res.progress;
			if (res.progress == 100) {
				me.upFlage = true;
			}
		});
	},
	methods: {
		typingContent(e) {
			let event = e;
			this.title = e.detail.value;
		},
		doPublich() {
			if (!this.upFlage) {
				return;
			}
			if (this.title.length < 5) {
				uni.showToast({
					title: '请输入5个字以上的标题！',
					icon: 'none'
				});
				return;
			}
			this.upFlage = false;
			uni.showLoading({
				title: '请稍等'
			});
			let me = this;
			let vlogInfo = storage.getVlogUserInfo();
			let userId = vlogInfo.id;
			let vlog = {
				vlogerId: userId,
				url: me.videoUrl,
				cover: me.tempCover || '',
				title: me.title,
				width: me.width,
				height: me.height,
				cityCode: storage.getCityCode()
			};

			// 发布视频
			let serverUrl = api.vlog;
			uni.request({
				method: 'POST',
				header: {
					headerUserId: userId,
					headerUserToken: storage.getVlogToken()
				},
				url: serverUrl + '/vlog/publish',
				data: vlog,
				success(result) {
					console.log(result);
					uni.switchTab({
						url: '/pages/me/me'
					});
					// if (result.data.status == 200) {
					// 	// uni.showToast({
					// 	// 	title: result.data.msg,
					// 	// 	icon: 'none',
					// 	// 	duration: 2000
					// 	// });

					// 	uni.switchTab({
					// 		url: '/pages/me/me'
					// 	});
					// } else {
					// 	uni.showToast({
					// 		title: result.data.msg,
					// 		icon: 'none',
					// 		duration: 3000
					// 	});
					// }
				},
				complete() {
					this.upFlage = true;
					uni.hideLoading();
				}
			});
		},

		preview() {
			uni.navigateTo({
				url: '/pages/publish/preview?videoUrl=' + this.videoUrl + '&width=' + this.width + '&height=' + this.height + '&localFile=' + this.localFile,
				animationType: 'slide-in-bottom',
				animationDuration: 500
			});
		},

		touchstartPreplay() {
			this.preplayTouched = true;
		},

		touchendPreplay() {
			this.preplayTouched = false;
		},

		touchstartPublish() {
			this.publishTouched = true;
		},

		touchendPublish() {
			this.publishTouched = false;
		},

		chooseCover() {
			let me = this;
			let vlogInfo = storage.getVlogUserInfo();
			let userId = vlogInfo.id;
			uni.chooseImage({
				count: 1,
				sizeType: 'original',
				sourceType: ['album'],
				success(e) {
					me.tempCover = e.tempFilePaths[0]; //先在本地回显
					// 上传封面
					let serverUrl = api.vlog;
					uni.uploadFile({
						filePath: e.tempFilePaths[0],
						url: serverUrl + '/upload',
						formData: {
							filetype: 'video'
						},
						header: {
							headerUserId: userId,
							headerUserToken: storage.getVlogToken()
						},
						name: 'file',
						success(result) {
							let res = JSON.parse(result.data);
							console.log(res);
							if (res.status == 200) {
								let imageUrl = res.data;
								me.tempCover = imageUrl;
								uni.showToast({
									title: res.msg,
									duration: 2000
								});
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none',
									duration: 3000
								});
							}
						}
					});
				}
			});
		}
	}
};
</script>

<style scoped>
.prpage {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-color: #181b27;
}

.main-body-img-m {
	min-height: 400rpx;
	/* width: 750rpx; */
	border: 2rpx solid #545456;
	border-radius: 20rpx;
	align-items: center;
}

.choose-cover-text {
	color: #ffffff;
	font-size: 28rpx;
	align-items: center;
}

.choose-cover {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-left: 100rpx;
	margin-top: 10px;
	width: 200rpx;
	height: 100rpx;
	position: relative;
}

.preplay-icon {
	width: 22rpx;
	height: 22rpx;
	align-items: center;
}

.preplay-text {
	color: #e6e6e6;
	font-size: 28rpx;
	align-items: center;
	margin-left: 15rpx;
}

.preplay-wrapper {
	display: flex;
	flex-direction: row;
	justify-content: center;
	padding: 6rpx 16rpx;
	width: 200rpx;
}

.main-body-content {
	/* display: flex; */
	flex-direction: row;
	justify-content: flex-start;
}

.vlog-content {
	margin-top: 30rpx;
	height: 200rpx;
	color: #000000;
	font-size: 16px;
	background-color: #ffffff;
	padding-left: 20rpx;
	padding-top: 20rpx;
	padding-right: 20rpx;
	padding-bottom: 20rpx;
	border-radius: 20rpx;
}

.btn-text {
	color: #e6e6e6;
	font-size: 36rpx;
	align-items: center;
	font-weight: 500;
}

.mbtn {
	margin-top: 30rpx;
	height: 90rpx;
	/* display: flex; */
	justify-content: center;
	align-items: center;
	border-radius: 40rpx;
	border: transparent;
}

.btn-publish {
	background-color: #ef274d;
	overflow: hidden;
}

.btn-publish-touched {
	background-color: #de6981;
	overflow: hidden;
}

.main-body {
	margin-top: 20rpx;
	padding: 0 20rpx;
}

.line {
	height: 1rpx;
	background-color: #393a41;
	width: 750rpx;
}

.progress {
	margin-top: 60rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 750rpx;
}

.progress-text {
	color: #f1f1f1;
	font-size: 32rpx;
	text-align: center;
	margin-top: 40rpx;
}

.progress-img {
	width: 600rpx;
	height: 600rpx;
	align-items: center;
}
</style>