前言

由于项目需要视频点播，后端最开始处理的视频上传，视频一大就会很卡且有时候上传不上去，所以改成获取参数由前端直传oss视频点播

环境

"vue": "~2.6.14",

public下面的index.html下载引入阿里SDK

<!--  IE需要es6-promise，目前支持IE 10及以上 -->
		<script src="/lib/aliyun-upload-sdk-1.5.6/lib/es6-promise.min.js"></script>
		<script src="/lib/aliyun-upload-sdk-1.5.6/lib/aliyun-oss-sdk-6.17.1.min.js"></script>
		<script src="/lib/aliyun-upload-sdk-1.5.6/aliyun-upload-sdk-1.5.6.min.js"></script>

ossUploadVideo.js文件

//这是后端给我的接口去获取相关凭证
import {create_upload_video_api} from "@/api/common"
// let OSS = require('ali-oss');
let AliyunUpload=window.AliyunUpload
let uploadAuth;
export function createUplader(_this,name,successFun,index,item) {
	console.log(AliyunUpload)
	let uploader = new AliyunUpload.Vod({
		userId: _this.videoDataForm.userId,
		partSize: _this.videoDataForm.partSize,
		parallel: _this.videoDataForm.parallel,
		retryCount: _this.videoDataForm.retryCount,
		retryDuration: _this.videoDataForm.retryDuration,
		//是否上报上传日志到点播，默认为true
		enableUploadProgress: true,
		// 开始上传
		'onUploadstarted': function(uploadInfo) {
			console.log(uploadInfo,"上传")
			if (!uploadInfo.videoId) {
				// 如果 uploadInfo.videoId 存在, 调用 刷新视频上传凭证接口()
				//这里主要是前端请求后台刷新上传凭证，接口由后端提供
				let nameTwo=uploadInfo.file.name.split('.')[0];
				let params = {
					title: name||nameTwo,
					path:`D:\\video\\`+uploadInfo.file.name
				}
				create_upload_video_api(params).then((res) => {
					if (res.code !== 200) {
						return _this.$message.error(res.msg)
					}
					uploadAuth = res.data.encodedUploadAuth
					let uploadAddress = res.data.encodedUploadAddress
					let videoId = res.data.vod_video_id
					uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress,videoId);
					console.log(res, 'res,res,res,')
				})
			}
		},
		// 文件上传成功
		'onUploadSucceed': event=>successFun(event,index,item),
		// 文件上传失败
		'onUploadFailed': function(uploadInfo, code, message) {
			console.log(uploadInfo,code, message)
			_this.videoLoading=false;
		},
		// 文件上传进度，单位：字节
		'onUploadProgress': function(uploadInfo, totalSize, loadedPercent) {
			console.log(uploadInfo, totalSize, loadedPercent)
		},
		// 上传凭证超时
		'onUploadTokenExpired': function(uploadInfo) {
			console.log("onUploadTokenExpired");
			//实现时，根据uploadInfo.videoId调用刷新视频上传凭证接口重新获取UploadAuth
			//从点播服务刷新的uploadAuth,设置到SDK里   
			_this.$message.success('上传文件超时，正在重新上传')
			uploader.resumeUploadWithAuth(uploadAuth);
			console.log(uploadInfo)
		},
		//全部文件上传结束
		'onUploadEnd': function(uploadInfo) {
			console.log("onUploadEnd: uploaded all the files",uploadInfo);
			// _this.$message.success('全部文件上传完毕')
			_this.videoLoading=false;
		}
	});
	return uploader
}

视频上传我这是需要多个上传，所以传递了当前行和下标

<div v-loading="scope.row.loading" class="room_add_img"
											style="margin: 0;padding: 0;width:74px;">
											<el-button type="primary"
												style="padding: 0;height: 30px;width:100%;">上传</el-button>
											<input style="height: 30px"
												@change="event => goUpload(event, scope.$index,scope.row)"
												type="file" />
										</div>

 vue date里面相关参数

uploader: '',
videoDataForm: {
	userId: '12356',
	region: '',
	partSize: 104857600, //分片大小
	parallel: 5, //并行上传片数
	retryCount: 3, //网络失败后重新上传次数
	retryDuration: 2, //网络失败后重新上传时间
},
videoLoading:false

获取到文件了就走上传 

goUpload(event, a, item) {
				let file = event.target.files[0];
				if (!file) {
					return
				}
				item.loading = true;
				this.videoLoading=true;
				let userData = '{"Vod":{}}';
				this.uploader = createUplader(this,item.name,this.successFun,a,item);
				this.uploader.addFile(file, null, null, null, userData);
				console.log(this.uploader)
				this.$nextTick(function(){
					console.log(file)
					this.uploader.startUpload();
					console.log(this.uploader.startUpload)
				})
			},

完整的vue代码 

<template>
	<div>
		<el-table :data="spList" ref="tmTab" style="width: 100%" v-loading="videoLoading">
			<el-table-column prop="title" label="视频名称">
				<template slot-scope='scope'>
					<el-input size="mini" type="text" v-model="scope.row.name"
						:placeholder="$t('请输入视频名称')" />
				</template>
			</el-table-column>
			<el-table-column prop="title" label="视频链接" min-width="140px">
				<template slot-scope='scope'>
					<el-input size="mini" type="text" disabled v-model="scope.row.urlTwo" :placeholder="$t('请上传视频')" />
				</template>
			</el-table-column>
			<el-table-column label="操作" width="120px">
				<template slot-scope='scope'>
					<div style="display: flex;flex-wrap: wrap;">
						<div v-loading="scope.row.loading" class="room_add_img" style="margin: 0;padding: 0;width:74px;">
							<el-button type="primary" style="padding: 0;height: 30px;width:100%;">上传</el-button>
							<input style="height: 30px" @change="event => goUpload(event, scope.$index,scope.row)"
								type="file" />
						</div>
						<el-button type="text" style="margin-left: 10px" @click="goAdd(scope.$index)">添加</el-button>
						<el-button type="text" style="margin-left: 10px" @click="goDel(scope.$index)"
							v-if="spList.length > 1">删除</el-button>
					</div>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
	import {
		createUplader
	} from "@/utils/ossUploadVideo";
	export default {
		components: {

		},
		data() {
			return {
				spList: [{
					url: "",
					urlTwo: "",
					name:""
				}],
				uploader: '',
				videoDataForm: {
					userId: '12356',
					region: '',
					partSize: 104857600, //分片大小
					parallel: 5, //并行上传片数
					retryCount: 3, //网络失败后重新上传次数
					retryDuration: 2, //网络失败后重新上传时间
				},
				videoLoading:false
			}	
		},
		mounted() {

		},
		methods: {
			goAdd(e) {
				let data = {
					url: "",
					urlTwo: "",
					name:""
				};
				this.spList.splice(e + 1, 0, data);
			},
			goDel(e) {
				this.spList.splice(e, 1);
			},
			goUpload(event, a, item) {
				console.log(event, a, item)
				let file = event.target.files[0];
				if (!file) {
					return
				}
				this.videoLoading=true;
				let userData = '{"Vod":{}}';
				this.uploader = createUplader(this,item.name,this.successFun,a,item);
				this.uploader.addFile(file, null, null, null, userData);
				console.log(this.uploader)
				this.$nextTick(function(){
					console.log(file)
					this.uploader.startUpload();
					console.log(this.uploader.startUpload)
				})
			},
            successFun(event,index,item){
				let self=this;
                //成功回调
				console.log(event,index,item)
				self.spList[index].url = event.endpoint +'/'+ event.object;
				self.spList[index].vod_video_id = event.videoId;
				self.spList[index].path = event.object;
				self.spList[index].urlTwo = self.spList[index].url;
				self.spList[index].loading = false;
				self.videoLoading=false;
			},
		}
	}
</script>

<style>

</style>