onecric_h5/pages/Videos/publish.vue

<template>
	<view class="publish">
		<u-navbar leftIconColor="#000" :fixed="false" leftIconSize="48" :autoBack="true">
			<view class="" slot="left" style="color: #DC3C23;">
				<!-- Cancel -->
				{{ $t('news.lab9') }}
			</view>
			<view class="" slot="center" style="">
				<!-- Publish -->
				{{ $t('news.lab10') }}
			</view>
			<view class="flex-end" slot="right" @click="submit()">
				<text class="Confirm">
					<!-- Confirm -->
				{{ $t('news.confirm') }}
				</text>
			</view>
		</u-navbar>
		<!-- <image src="" mode="scaleToFill"></image> -->
		<u--textarea @focus="focus" @blur="blur" class="input" height="308" v-model="value2" confirmType="done"
			border="none" placeholder="Please enter your content" maxlength="-1"></u--textarea>
		<view class="upload-nav flex-start">
			<!-- <u-upload :fileList="fileList2" :uploadText="$t('common.lab')" @afterRead="afterRead" @delete="deletePic"
				imageMode="scaleToFill" name="2" width="200" height="200" multiple :maxCount="1">
				<image src="/static/image/videos/Upload@2x.png" mode="aspectFill" style="width: 200rpx;height: 200rpx;">
				</image>
			</u-upload> -->

			<u-upload :fileList="fileList1" :uploadText="$t('common.lab')" @afterRead="afterRead" @delete="deletePic"
				imageMode="scaleToFill" accept="video" name="1" width="200" height="200" multiple :maxCount="1">
				<image src="/static/image/videos/Uploadthevideo@2x.png" mode="aspectFill"
					style="width: 200rpx;height: 200rpx;"></image>
			</u-upload>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 0,
				value2: '',
				showType: false,
				show: false,
				columns: [],
				select: {
					name: ''
				},
				CovrUrl:'',
				status: 'error',
				fileList2: [],
				fileList1: [],
			}
		},
		computed: {
			qiuNiu() {
				return this.$store.state.qiuNiu
			}
		},
		onLoad() {},
		methods: {
			/* 提交数据 */
			submit() {
				if (this.$store.state.isLogin != 1) {
					this.$toUrl('/pages/login/login')
					return
				}
				if (this.fileList1.length == 0) return this.$toast(this.$t('news.lab12'))
				if (!this.CovrUrl) return
				let data = {
					flie: [{
						img: this.CovrUrl,
						video: this.fileList1[0].url
					}],
					title: this.value2,
				}
				let str = this.fileList1[0].url.slice(0, 4)
				if (str == 'blob') {
					return this.$toast(this.$t('news.lab11'))
				}
				uni.$u.http.post('api/Video_user/insert', data).then(res => {
					this.$back()
					let pages = getCurrentPages();
					let prevPage = pages[pages.length - 2]; //上一页页面实例
					prevPage.$vm.ajax.page = 1;
					prevPage.$vm.ajax.load = true;
					prevPage.$vm.getList()
				}).catch(res => {})
			},

			close() {
				this.showType = false
			},
			// 获取焦点
			focus(e) {
				this.show = true
			},
			// 失去焦点
			blur(e) {
				// this.show = false
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 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: this.$t('common.lab')
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i]);
					// this.getVideoPic(result)
					this.parseBlob(result)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			/* 已实现简单方式，废用 */
			getVideoPic(url) {
				let that = this;
				// return new Promise(function(resolve, reject) {
				let dataURL = '';
				let video = document.createElement("video");
				video.currentTime = 3;
				video.setAttribute('crossOrigin', 'anonymous'); //处理跨域
				video.setAttribute('src', url);
				video.setAttribute('width', 400);
				video.setAttribute('height', 240);
				video.setAttribute('preload', 'auto');
				video.addEventListener('loadeddata', function() {
					let canvas = document.createElement("canvas"),
						width = video.width, //canvas的尺寸和图片一样
						height = video.height;
					canvas.width = width;
					canvas.height = height;
					canvas.getContext("2d").drawImage(video, 0, 0, width, height); //绘制canvas
					dataURL = canvas.toDataURL('image/jpeg'); //转换为base64
					that.parseBlob(dataURL)
				});
				// })
			},
			parseBlob(base64) {
				let key = new Date().getTime() + '.png';
				var blob = `${base64}?vframe/jpg/offset/0`
				let {
					token,
					domain,
					uploadHost,
					httpsdomain
				} = this.qiuNiu;
				uni.uploadFile({
					url: 'https://' + uploadHost, // 仅为示例，非真实的接口地址
					filePath: blob,
					name: 'file',
					formData: {
						key: key,
						token: token
					},
					success: (res) => {
						let data = JSON.parse(res.data)
						this.CovrUrl = httpsdomain + '/' + data.key
					},
				})
			},
			uploadFilePromise(item) {
				if (item.type == 'video') {
					this.status = 'loading'
				}
				let {
					token,
					domain,
					uploadHost,
					httpsdomain
				} = this.qiuNiu;
				let type = item.name.slice(-5);
				let key = new Date().getTime() + type;
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'https://' + uploadHost, // 仅为示例，非真实的接口地址
						filePath: item.url,
						name: 'file',
						formData: {
							key: key,
							token: token
						},
						success: (res) => {
							let data = JSON.parse(res.data)
							if (item.type == 'video') {
								this.status = 'success'
							}
							setTimeout(() => {
								resolve(httpsdomain + '/' + data.key);
							}, 200)
						}
					});
				})
			}
		
		}
	}
</script>

<style lang="scss">
	/deep/.u-upload__wrap__preview__other__text {
		display: none;
	}

	/deep/.u-upload__wrap__preview {
		width: 200rpx;
		height: 200rpx;
		margin: 0 !important;
	}

	page {
		background: #F3F3F7;
	}

	.upload-nav {
		padding: 24rpx;
		margin-top: 30rpx;
	}

	.select {
		color: #333;
		padding: 24rpx;
	}

	.input {
		margin: 20rpx 24rpx;
	}

	.Confirm {
		color: #fff;
		border-radius: 40rpx;
		padding: 6rpx 24rpx;
		background-color: $color2;
	}

	.operation {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 32rpx;
		background-color: white;

		image {
			width: 48rpx;
			height: 48rpx;
			margin-right: 64rpx;
		}

		view {
			color: #fff;
			padding: 8rpx 30rpx;
			border-radius: 40px;
			background-color: $color2;
		}
	}
</style>