vue2 文件，视频，图片上传

<template>
	<el-upload class="avatar-uploader" action="" //上传的网址存放
        v-bind:data="{ FoldPath: '上传目录', SecretKey: '安全验证' }"
		v-bind:on-progress="uploadVideoProcess" v-bind:on-success="handleVideoSuccess"
		v-bind:before-upload="beforeUploadVideo" v-bind:show-file-list="false">
		<video v-if="videoForm.showVideoPath != '' && !videoFlag && videoForm.type == 'video'" v-bind:src="videoForm.showVideoPath"
			class="avatar video-avatar" controls="controls">
			您的浏览器不支持视频播放
		</video>
		<img style="width: 80px;" v-if="videoForm.showVideoPath != '' && !videoFlag && videoForm.type == 'image'" :src="videoForm.showVideoPath" >
		<div v-if="videoForm.showVideoPath != '' && !videoFlag && videoForm.type == 'text'">
			<span>{{ videoForm.name }}</span>
		</div>
		<i v-else-if="videoForm.showVideoPath == '' && !videoFlag" class="el-icon-plus avatar-uploader-icon"></i>
		<el-progress v-if="videoFlag == true" type="circle" v-bind:percentage="videoUploadPercent"
			style="margin-top: 7px"></el-progress>
	</el-upload>
</template>

<script>
	export default {
		data() {
			return {
				videoFlag: false,
				//是否显示进度条
				videoUploadPercent: "",
				//进度条的进度，
				isShowUploadVideo: false,
				//显示上传按钮
				videoForm: {
					showVideoPath: "", //回显的变量
					type: '',
					name: ''
				},
			}
		},
		methods: {
			//上传前回调
			beforeUploadVideo(file) {
				var fileSize = file.size / 1024 / 1024 < 500; //控制大小  修改50的值即可
				console.log(file.type)
				this.videoForm.type = file.type.split('/')[0]
				console.log(this.videoForm.type)
				if(this.videoForm.type != 'image' && this.videoForm.type != 'video'){
					this.videoForm.type = 'text'
				}
				if (!fileSize) {
					this.$message.error("视频大小不能超过500MB");
					return false;
				}
				this.isShowUploadVideo = false;
			},
			//进度条
			uploadVideoProcess(event, file, fileList) { //注意在data中添加对应的变量名
				this.videoFlag = true;
				this.videoUploadPercent = file.percentage.toFixed(0) * 1;
			},
			//上传成功回调
			handleVideoSuccess(res, file) {
				this.isShowUploadVideo = true;
				this.videoFlag = false;
				this.videoUploadPercent = 0;
				console.log(res);
				//后台上传数据
				if (res.code == 200) {
					this.videoForm.showVideoPath = res.result.fileDownloadUri; //上传成功后端返回视频地址 回显
					this.videoForm.name = res.result.fileName
				} else {
					this.$message.error("上传失败！");
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.avatar-uploader-icon {
		border: 1px dashed #d9d9d9 !important;
	}

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9 !important;
		border-radius: 6px !important;
		position: relative !important;
		overflow: hidden !important;
	}

	.avatar-uploader .el-upload:hover {
		border: 1px dashed #d9d9d9 !important;
		border-color: #409eff;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 300px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}

	.avatar {
		width: 300px;
		height: 178px;
		display: block;
	}
</style>