school/pages/homework/setHomework.vue

<template>
	<view class="center">
		<view class="text">上传视频</view>
		<view class="add_picture" v-if="src" >
			<video :src="src" ></video>
			<view @click="DelImg" class="x">x</view>
		</view>
		<view v-else class="add_picture">
			<image src="https://zhibo.liuniu946.com/img/phone.png"  @click="test"></image>
		</view>
		<view class="text">上传图片</view>
		<view class="add_picture">
			<image :src="cardimg" mode="" class="upload-img" @click.stop="imgsub" v-if="cardimg"></image>
			<image src="https://zhibo.liuniu946.com/img/phone.png" class="upload-img" mode="" v-if="!cardimg" @click.stop="imgsub"></image>
		</view>
		<view class="buttom" @click="submit()">上传作业</view>
	</view>
</template>

<script>
import { sethomework } from '@/api/homework.js';
import {
		uploads, upvideo
	} from '@/api/apply.js';
export default {
	data(){
		return{
			id: '',
			src:'',
			key:'',
			cardimg:'',
			token:''//七牛云的token
		}
	},
	onLoad(option) {
		this.id = option.id
	},
	methods:{
		// 上传图片
		imgsub() {
			console.log('上传图片')
			uploads({
				filename: ''
			}).then(data => {
				console.log("data",data);
				this.cardimg = data[0].url;
			})
		},
		submit(){
			sethomework({
				timetable_id: this.id,
				task_video: this.src
			}).then(() =>{
				
			}).catch(err =>{
				console.log(err)
			})
		},
		test(){
			console.log('上传视频')
			upvideo({
				filename: ''
			}).then(data => {
				console.log("data",data);
				// this.src = data[0].url;
			})
		},
	// 	test: function () {
	// 				    var self = this;
	// 				    uni.chooseVideo({
	// 						count: 1,
	// 						sourceType: ['camera', 'album'],
	// 				        success: function (res) {
	// 							console.log("选择视频成功",res)
	// 				            self.src = res.tempFilePath;
	// 							uni.uploadFile({
	// 								url: 'https://up-z2.qiniup.com', //仅为示例，非真实的接口地址
	// 								filePath: res.tempFilePath,
	// 								name: 'files',
	// 								formData: {
	// 								    'token':self.token,
	// 									'key':self.key
	// 								},
	// 								header: {
	// 									Authorization: 'Bearer ' + uni.getStorageSync('access')
	// 								},
	// 								 success: (uploadFileRes) => {
	// 									console.log('1张', uploadFileRes);
	// 									let bold = JSON.parse(uploadFileRes.data)
	// 									console.log(bold)
	// 									console.log(bold.result[0].filePath)
	// 									self.src = bold.result[0].filePath + bold.result[0].fileName
	// 									console.log("this.returnImage", self.returnImage)
	// 								},
								
	// 							});
	// 				        }
	// 				    });
	// 				},
		//右上角删除视频
			DelImg(){
						this.src='',
						this.showVideo=false,
						this.addVideo=true
					},
	}
}
</script>

<style lang="scss">
	.buttom {
		margin: 50rpx auto;
		width: 560rpx;
		height: 90rpx;
		background: #1CC7C7;
		border-radius: 45px;
		text-align: center;
		line-height: 90rpx;
	}
	.add_picture {
		text-align: center;
		position: relative;
		.x{
			position: absolute;
			top: 10rpx;
			right: 90rpx;
			width: 40rpx;
			height: 40rpx;
			color: #FFFFFF;
			z-index: 99;
		}
	}
	.text {
		text-align: center;
	}
</style>