vue + elementUI upload组件，前端上传视频到阿里云视频点播

1.视频上传阿里云，首先引用阿里云的sdk,放在所需界面中引用

	import '@/utils/aliyun-oss-sdk-6.13.0.min.js';
	import '@/utils/aliyun-upload-sdk-1.5.2.min.js';

2：在上传的页面先声明一个 new ×××× vod({})对象

	createUplader(_this) {
				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 params = {
								fileName: uploadInfo.file.name
							}
						uploadVideolist(params).then((res) => {
								if (res.code !== 200) {
									return _this.$message.error(res.msg)
								}
								let uploadAuth = res.data.uploadAuth
								let uploadAddress = res.data.uploadAddress
								let videoId = res.data.videoId
								_this.fileName = res.data.fileName
								uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress,
									videoId)
								_this.$message.success(res.msg)
								_this.videoLoading.close()
										console.log(res, 'res,res,res,')
							})
						}
					},
					// 文件上传成功
					'onUploadSucceed': function(uploadInfo) {
						console.log(uploadInfo)
						_this.videoLoading.close()
					},
					// 文件上传失败
					'onUploadFailed': function(uploadInfo, code, message) {
						console.log(uploadInfo)
						_this.videoLoading.close()
					},
					// 文件上传进度，单位：字节
					'onUploadProgress': function(uploadInfo, totalSize, loadedPercent) {
						console.log(uploadInfo)
					},
					// 上传凭证超时
					'onUploadTokenExpired': function(uploadInfo) {
						console.log("onUploadTokenExpired");
						//实现时，根据uploadInfo.videoId调用刷新视频上传凭证接口重新获取UploadAuth
						//从点播服务刷新的uploadAuth,设置到SDK里   
						_this.$message.success('上传文件超时，正在重新上传')
						uploader.resumeUploadWithAuth(uploadAuth);
					},
					//全部文件上传结束
					'onUploadEnd': function(uploadInfo) {
						console.log("onUploadEnd: uploaded all the files");
						_this.$message.success('全部文件上传完毕')
						_this.videoLoading.close()
					}
				});
				return uploader
			},

3：在element ui组件中的el-upload

<div style="padding-left: 100px;">
		<el-upload  multiple drag class="videoboxUpload" action="" :show-file-list="false" :auto-upload="false"
			accept=".mp4,.flv,.mov,.mp3" :on-change="videoChange" :before-upload="videoBeforeUp" :limit="2">
			<div class="upload_div">
		  <i class="el-icon-upload"></i>
				<span class="span_icon">上传视频</span>
			</div>
		</el-upload>
		<div class="msg_video">
			<span>注意只能上传.mp4,.flv,.mov,.mp3格式的视频</span>
		</div>
		<div class="lbvideo_box">
			<div class="video_fj">	
				<el-row :gutter="20">
				  <el-col :span="10">
					  <video v-if="videoDataUrl" :src="videoDataUrl"
					   class="avatar" controls="controls">您的浏览器不支持视频播放</video>
				  </el-col>
				  <el-col :span="10" >
				  </el-col>
				</el-row>		
			</div>
		</div>
		<div class="video_bot">
			<el-button type="primary" @click="toalySaveVideo">保存视频</el-button>
		</div>
		</div>

4：js部分

export default {
    data () {
        return {
            videoDataUrl: '',
            videoLoading:'',
            videoData: '',
            uploader: '',
            videoDataForm: {
                userId: '12356',
                region: '',
                partSize: 1048576,//分片大小
                parallel: 5,//并行上传片数
                retryCount: 3,//网络失败后重新上传次数
                retryDuration: 2, //网络失败后重新上传时间
            },
            videoId: ''
        }
    },

5：方法

methods: {
//视频文件钩子改变
			videoChange(file, fileList) {
				console.log(file)
				let _this = this
				let fileReader = new FileReader()
				fileReader.readAsDataURL(file.raw)
				fileReader.onload = function(e) {
					_this.videoDataUrl = e.currentTarget.result
				}
				this.videoData = file
				console.log(file.size / 1024 / 1024)
				let userData = '{"Vod":{}}'
				if (this.uploader) {
					this.uploader.stopUpload()
				}
				this.uploader = this.createUplader(this)
				this.uploader.addFile(file.raw, null, null, null, userData)
			},
			// 视频文件上传前的钩子
			videoBeforeUp(file) {
					//视频上传大小
				const isLt1024M = file.size / 1024 / 1024 < 1024;
				if (['video/mp4','video/mp3', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb'].indexOf(file.type) == -
					1) {
					this.$message.error('请上传正确的视频格式');
					return false;
				}
				if (!isLt1024M ) {
					this.$message.error('上传视频大小不能超过1GB哦!');
					return false;
				}
			},
			// 保存视频
			toalySaveVideo() {
				this.videoLoading = this.$loading({
					lock: true,
					text: '正在上传视频文件，请稍后',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.uploader.startUpload()
				console.log(this.uploader.startUpload)
			},
}

到这里基本可以上传成功了，可以在阿里云的看到自己上传的视频