siyu_app/pages/expert/releaseVideo.vue

<template>
	<view>
		<!-- <u-sticky offsetTop="0" customNavHeight="0" zIndex="999">
			<view class="content-header-sticky x-c">
				<image class="bg-img" src="/static/image/home/home_top_bg.png" style="z-index: -1;"></image>
				<uni-icons type="left" size="26" color="#fff" class="backicon" @click="$navBack()"></uni-icons>
				<text class="textOne" style="width: 50%;text-align: center;color: #fff;">编辑视频信息</text>
			</view>
		</u-sticky>
		<image class="bg-img" src="/static/image/home/home_top_bg.png"></image> -->
		<bgNavBar title="编辑视频信息"></bgNavBar>
		<view class="videobox x-c">
			<video v-if="fileList1.length>0" :src="fileList1[0].url" :poster="fileList1[0].thumbnailUrl"
				:autoplay='true' class="video"></video>
			<view class="closeempty" v-if="fileList1.length>0" @click="deletePic($event,'myevent')"><uni-icons
					type="trash" size="28" color="red"></uni-icons></view>
			<view v-else>
				<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
					:maxCount="1" accept="video">
					<view class="uploadbox">
						<uni-icons type="plusempty" size="30"></uni-icons>
						<text>上传视频</text>
					</view>
				</u-upload>
			</view>
		</view>
		<view style="position: relative;">
			<view class="es-pl-24 es-pr-24 es-pt-24 es-pb-24">
				<view class="box es-br-24 es-mb-24">
					<view class="box-title x-bc">
						<text class="name">分区或标签</text>
						<uni-icons type="right" size="16" color="#222"></uni-icons>
					</view>
					<view class="tags">
						<u-tag
							v-for="i in 5"
						  text="中医药"
						  closable
						  color="#666"
						  bgColor="#ffe8dc"
						  borderColor="#ffe8dc"
						  :show="true"
						  @close="close1 = false"
						></u-tag>
					</view>
				</view>
				<view class="box es-br-24 es-mb-24">
					<view class="box-title x-bc es-mb-24">
						<text class="name">标题</text>
						<uni-icons type="right" size="16" color="#222"></uni-icons>
					</view>
					<u--input placeholder="请输入标题" border="none" v-model.trim="form.title" clearable
						maxlength="50"></u--input>
				</view>
				<view class="box es-br-24">
					<view class="box-title x-bc es-mb-24">
						<text class="name">描述</text>
						<uni-icons type="right" size="16" color="#222"></uni-icons>
					</view>
					<u--textarea v-model.trim="form.description" border="none" autoHeight placeholder="介绍你的视频，让更多人了解你的作品"
						maxlength="300"></u--textarea>
				</view>
				<view class="footer-btn">
					<view @click="submit">发布</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import bgNavBar from "./components/bgNavBar.vue"
	import { navBack } from "../../utils/common";
	import { uploadOSSTalent,talentVideo } from "@/api/expert.js"
	export default {
		components: {
			bgNavBar
		},
		data() {
			return {
				current: 1,
				interval: 3000,
				duration: 1000,
				autoplay: true,
				advImgs: [{}],
				form: {
					duration: null,
					url: '',
					thumbnailUrl: '',
					title: '',
					description: ''
				},
				value: '',
				value1: '',
				videoUrl: '',
				thumbnail: '',
				fileList1: [],
			}
		},
		onLoad() {
			this.uploadVideo()
		},
		methods: {
			uploadVideo() {
				let self = this
				// #ifdef APP-PLUS
				if (!plus.runtime.isAgreePrivacy()) {
					uni.showToast({
						title: "请同意隐私政策",
						icon: "none"
					});
					return;
				}
				// #endif
				uni.chooseVideo({
					sourceType: ['album'],
					success: async (res) => {
						const result = await this.uploadFilePromise(res.tempFilePath)
						this.fileList1 = [{
							url: result.url,
							thumbnailUrl: result.thumbnailUrl,
							duration: result.videoInfo.duration
						}]
					}
				});
			},
			submit() {
				if(this.fileList1.length==0) {
					uni.showToast({
						title: "请上传视频",
						icon: "none"
					})
					return
				}
				if(!this.form.title.trim()) {
					uni.showToast({
						title: "请输入标题",
						icon: "none"
					})
					return
				}
				if(!this.form.description.trim()) {
					uni.showToast({
						title: "请输入描述",
						icon: "none"
					})
					return
				}
				const form = {
					title: this.form.title,
					description: this.form.description,
					url: this.fileList1[0].url,
					thumbnail: this.fileList1[0].thumbnailUrl,
					duration: this.fileList1[0].duration,
					tags: '中医药'
				}
				uni.showLoading({
					title: '发布中',
				})
				talentVideo(form).then(res=>{
					uni.hideLoading()
					if(res.code == 200) {
						uni.showToast({
							title: '发布成功，待管理员审核',
							icon: 'none'
						})
						setTimeout(()=>{
							this.$navBack()
						},1500)
					}
				}).catch(()=>{
					uni.hideLoading()
				})
			},
			deletePic(event, type) {
				if (type == 'myevent') {
					this.fileList1.splice(0, 1)
				} else {
					this[`fileList${event.name}`].splice(event.index, 1)
				}
			},
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result.url,
						thumbnailUrl: result.thumbnailUrl,
						duration: result.videoInfo.duration
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					uni.showLoading({
						title: '上传中',
					})
					let a = uni.uploadFile({
						url: uni.getStorageSync('requestPath') +
						'/app/talent/uploadOSSTalent', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						success: (res) => {
							resolve(JSON.parse(res.data))
						},
						fail: (err) => {
							uni.showToast({
								title: '上传视频失败',
								icon: 'error'
							})
						},
						complete: () => {
							uni.hideLoading()
						}
					});
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	@mixin u-flex($flexD, $alignI, $justifyC) {
		display: flex;
		flex-direction: $flexD;
		align-items: $alignI;
		justify-content: $justifyC;
	}

	.videobox {
		width: 694rpx;
		height: 390rpx;
		margin: 0 auto 16rpx auto;
		border-radius: 20rpx;
		overflow: hidden;
		position: relative;
		background-color: #fff;

		.video {
			width: 694rpx;
			height: 390rpx;
			border-radius: 20rpx;
			overflow: hidden;
		}

		.closeempty {
			position: absolute;
			z-index: 99;
			right: 0;
			top: 0;
			background-color: #fff;
			border-radius: 0 20rpx 0 20rpx;
		}
	}

	.uploadbox {
		width: 200rpx;
		height: 200rpx;
		@include u-flex(column, center, center);
	}

	.box {
		padding: 24rpx;
		background-color: #fff;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 34rpx;
		color: #222222;
	}

	.tags {
		@include u-flex(row, center, flex-start);
		flex-wrap: wrap;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #555;
	}

	.footer-btn {
		@include u-flex(row, center, center);
		font-family: PingFang SC, PingFang SC;
		margin-top: 60rpx;

		view {
			width: 602rpx;
			height: 88rpx;
			background: #FF5C03;
			border-radius: 26rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 32rpx;
			color: #FFFFFF;
			@include u-flex(row, center, center);
		}
	}
</style>