上传视频并获取加载进度

vue 实现上传视频到阿里（效果如下图所示）
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210419145040569.pn
1、html

<!-- 视频上传 -->
<template>
	<div class="voide_upload">
		<div>
			<!-- 显示内容 -->
			<div v-if="voideComputed">
				<div class="voide" v-for="(item ,i ) in listVideo" :key="i">
					<video class="imgdata" :src="item | imageFilter"></video>
					<!-- 删除 -->
					<div class="del_icon">
						<img src="https://tpappicon.oss-cn-shenzhen.aliyuncs.com/pc_img/assets/home/shanchu.png" @click="delvoide(i)" />
					</div>
				</div>
			</div>
			<!-- 点击上传 -->
			<div class="voide" v-else>
				<div v-if="shipin" style="text-align: center;align-items: center;">
					<img class="img_icon" src="https://tpappicon.oss-cn-shenzhen.aliyuncs.com/pc_img/assets/home/shipin.png"  />
					<p style="font-size: 10px;color: #999999; text-align: center; font-weight: 100; width: 100%;">添加视频(500M以内)</p>
				</div>
				<!-- 限定为只能上传视频 -->
				<input type="file" accept="video/*" @change="upload($event)" />
			</div>
			<img style="position: absolute;margin-top: -122px;margin-left: 158px;" src="../../assets/xvniji/xuantian.png" />
		</div>

		<!-- 视频进度条 -->
		<el-progress v-show="progress" class="progress" type="circle" :percentage="progViode"></el-progress>
	</div>
</template>

2、js部分

import {
		mapState
	} from 'vuex'
	import aliUpload from "../../plugin/fun/aliVideoUpload.js"
	import {
		Message
	} from 'element-ui';
export default {
props: {
			listVideo: {
				type: Array,
				default: () => {
					return []
				}
			}
		},
data() {
			return {
				progress: false, //进度条是否显示
				shipin: true, //视频图标
				loading: false,

			}
		},
		}

3、methods：

computed: {
			voideComputed() {
				if (this.listVideo[0] == "") {
					this.listVideo.splice(0, 1);
				}
				return !this.listVideo.length == 0;
			},
			...mapState([
				'progViode'
			])
		},
		methods: {
			async upload(e) {
				// this.loading = true; //显示加载
				this.shipin = false
				this.progress = true
				let file = e.target.files[0]
				let result = await aliUpload('video', file);
				if (result) {
					this.progress = false
				}
				// this.loading = false;
				// Message.success("上传完成");

				// alert("上传完成")
				this.$emit('getvoideUrl', result)
			},
			delvoide(i) {
				this.$emit('delvoide', i)
				this.shipin = true

			}
		}

4、文件上传阿里js

/**
 * @图片、视频上传到阿里账号
 * 1、下载 ali-oss
 * npm i ali-oss -S
 * 
 **/

import timeFormat from "./timeFormat.js" //导入时间格式化
import guid from "./guid.js" //随机字符串
import store from '../../store/index.js'
let OSS = require('ali-oss');


let aliConfigData = JSON.parse(localStorage.getItem("aliConfigData")) //获取存储ali数据

let config = {
	// region以杭州为例（oss-cn-hangzhou），其他region按实际情况填写。
	// oss-cn-hongkong.aliyuncs.com则填写oss-cn-hongkong
	region:~~删除线格式~~ 
	//云账号AccessKey有所有API访问权限，建议遵循阿里云安全最佳实践，创建并使用STS方式来进行API访问
	accessKeyId:~~删除线格式~~ 
	accessKeySecret:~~删除线格式~~ 
	// stsToken: ~~删除线格式~~ 
	bucket: ~~删除线格式~~ 

}

// 看阿里账号内容
let client = new OSS(config);
let tempCheckpoint;
//上传视频
const Uplod = async function Uplod(type, file) {

	var index = file.name.lastIndexOf('.'),
		filename = file.name.substring(index);
	try {
		let timestamp = new Date().getTime(),
			name = 'ali/' + type + '/' + timeFormat(timestamp, 'yyyymmdd') + '/' + timeFormat(timestamp, 'hh/MM/ss') +
			guid() + filename;
		//raw eleui上传独有
		// object-key可以自定义为文件名（例如file.txt）或目录（例如abc/test/file.txt）的形式，实现将文件上传至当前Bucket或Bucket下的指定目录。
		let progressApi = 0
		// 上传进度
		let result = await client.multipartUpload(name, file, {
			progress: (p, checkpoint) => {
				store.commit("ProgressNum", p)
			}
			// meta: { year: 2020, people: 'test' },
		})
		return result.name
		// console.log("看结果", result)
	} catch (e) {
		// console.log("报错没", e);
	}

}
// multipartUpload(); // 开始上传，

export default Uplod

5、在使用的页面引用

    <voideUpload :listVideo="dialogImageUrlv" @getvoideUrl="getvoideUrl" @delvoide="delvoide"></voideUpload>
    <script>
	import voideUpload from "./voide-upload.vue" //视频上传
	export default {
	        components: {
			         voideUpload
	      	},
		}
	</script>