vue 阿里云视频上传

		<template>
			<div class="container">
				<div class="upload">
					<div style="text-align: left;margin-top: 20px;">
						<p style="margin-bottom: 10px;">视频</p>
						<div class="xc_item" v-if="video_img">
							<img class="coverimg" :src="video_img" />
							<!-- <img class="del" src="../assets/del.png" @click="delelvideo"/> -->
						</div>
						<img src="../assets/videos1.png" style="height: 100px;" v-if="!video_img" @click="startup"/>
						<input type="file" id="fileUpload" style="display: none;" @change="fileChange($event)">
						<label class="status"> <span>{{statusText}}</span></label>
					</div>
				</div>
			</div>
		</template>
		<style scoped>
			.xc_item{
				display: inline-block;
				position: relative;
				height: 150px;
				width: 150px;
				margin-right: 15px;
			}
			.coverimg{
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
			.xc_item .del{
				position: absolute;
				top: 3px;
				right: 3px;
				width: 20px;
				height: 20px;
			}
		</style>
		
		<script>
			import axios from 'axios'
			import {Toast} from 'vant'
			export default {
				data() {
					return {
						api: this.defines.domain,
						timeout: '',
						partSize: '',
						parallel: '',
						retryCount: '',
						retryDuration: '',
						region: 'cn-shanghai',
						userId: '14567899399046780',
						file: null,
						authProgress: 0,
						uploadDisabled: true,
						resumeDisabled: true,
						pauseDisabled: true,
						uploader: null,
						statusText: '',
						v_title:'',
						v_filename:'',
						upinfo:'',
						video_img:null,
						video_url:null,
						
					}
				},
				comments:{
					[Toast.name]:Toast
				},
				created() {
					
				},
				methods: {
					startup(){
						document.getElementById('fileUpload').click();
					},
					delelvideo() {
						this.video_img = null
						this.video_url = null
						this.file = null
						var obj = document.getElementById('fileUpload') ; 
						obj.outerHTML=obj.outerHTML; 
						
					},
					fileChange(e) {
						this.file = e.target.files[0]
						if (!this.file) {
							alert("请先选择需要上传的文件!")
							return
						}
						// console.log("文件大小: " + (this.file.size/1024/1024).toFixed(2)+'M')
						if(this.file.size/1024/1024>100){
							Toast("视频文件大小不能超过100M")
							return
						}
						var Title = this.file.name
						var userData = '{"Vod":{}}'
						if (this.uploader) {
							this.uploader.stopUpload()
							this.authProgress = 0
							this.statusText = ""
						}
						this.uploader = this.createUploader();
						// console.log(userData)
						this.uploader.addFile(this.file, null, null, null, userData)
						this.uploadDisabled = false
						this.pauseDisabled = true
						this.resumeDisabled = true
						this.authUpload()
					},
					authUpload() {
						// 然后调用 startUpload 方法, 开始上传
						if (this.uploader !== null) {
							this.uploader.startUpload()
							this.uploadDisabled = true
							this.pauseDisabled = false
						}
					},
					// 暂停上传
					pauseUpload() {
						if (this.uploader !== null) {
							this.uploader.stopUpload()
							this.resumeDisabled = false
							this.pauseDisabled = true
						}
					},
					// 恢复上传
					resumeUpload() {
						if (this.uploader !== null) {
							this.uploader.startUpload()
							this.resumeDisabled = true
							this.pauseDisabled = false
						}
					},
					createUploader(type) {
						let self = this
						let uploader = new AliyunUpload.Vod({
							timeout: self.timeout || 60000,
							partSize: self.partSize || 1048576,
							parallel: self.parallel || 5,
							retryCount: self.retryCount || 3,
							retryDuration: self.retryDuration || 2,
							region: self.region,
							userId: self.userId,
							// 添加文件成功
							addFileSuccess: function(uploadInfo) {
								self.uploadDisabled = false
								self.resumeDisabled = false
								self.statusText = '添加文件成功, 等待上传...'
								// console.log("addFileSuccess: " + uploadInfo.file.name)
								// console.log("文件大小: " + (uploadInfo.file.size/1024/1024).toFixed(2)+'M')
								
							},
							// 开始上传
							onUploadstarted: function(uploadInfo) {
								// console.log(uploadInfo)
								// 如果是 UploadAuth 上传方式, 需要调用 uploader.setUploadAuthAndAddress 方法
								// 如果是 UploadAuth 上传方式, 需要根据 uploadInfo.videoId是否有值，调用点播的不同接口获取uploadauth和uploadAddress
								// 如果 uploadInfo.videoId 有值，调用刷新视频上传凭证接口，否则调用创建视频上传凭证接口
								// 注意: 这里是测试 demo 所以直接调用了获取 UploadAuth 的测试接口, 用户在使用时需要判断 uploadInfo.videoId 存在与否从而调用 openApi
								// 如果 uploadInfo.videoId 存在, 调用 刷新视频上传凭证接口(https://help.aliyun.com/document_detail/55408.html)
								// 如果 uploadInfo.videoId 不存在,调用 获取视频上传地址和凭证接口(https://help.aliyun.com/document_detail/55407.html)
								if (!uploadInfo.videoId) {
									let v_filename=uploadInfo.file.name
									let v_title=uploadInfo.file.name.split('.')[0]
									// console.log(v_title)
									// console.log(v_filename)
									self.$http.post(
										self.api + '/api/app/uploadvideo/createUploadVo', 
										{title: v_title,filename: v_filename},
										{emulateJSON: true}
									)
									.then(function(res) {
										// console.log(res)
										if (res.body.code == 200) {
											// console.log(res.body.data)
											let uploadAuth = res.body.data.UploadAuth
											let uploadAddress = res.body.data.UploadAddress
											let videoId = res.body.data.VideoId
											// console.log(uploadAuth)
											// console.log(uploadAddress)
											// console.log(videoId)
											//console.log(uploadInfo)
											uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress, videoId)
											
										}else {
											Toast(res.body.msg);
										}
									}),
									function(res) {
										// console.log(res)
									}
									self.statusText = '文件开始上传...'
									console.log("onUploadStarted:" + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" +
										uploadInfo.bucket + ", object:" + uploadInfo.object)
								} else {
									
									self.$http.post(
										self.api + '/api/app/uploadvideo/refreshUploadVideo', 
										{VideoId: uploadInfo.videoId},
										{emulateJSON: true}
									)
									.then(function(res) {
										// console.log(res)
										if (res.body.code == 200) {
											console.log(res.body.data)
											let uploadAuth = res.body.data.UploadAuth
											let uploadAddress = res.body.data.UploadAddress
											let videoId = res.body.data.VideoId
											// console.log(uploadAuth)
											// console.log(uploadAddress)
											// console.log(videoId)
											//console.log(uploadInfo)
											uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress, videoId)
											
										}else {
											Toast(res.body.msg);
										}
									}),
									function(res) {
										// console.log(res)
									}
								}
							},
							// 文件上传成功
							onUploadSucceed: function(uploadInfo) {
								// console.log(uploadInfo);
								console.log("onUploadSucceed: " + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" +
									uploadInfo.bucket + ", object:" + uploadInfo.object)
								self.statusText = '更新视频封面......'
								setTimeout(function () {
									self.$http.post(
										self.api + '/api/app/uploadvideo/getPlay', 
										{VideoId: uploadInfo.videoId},
										{emulateJSON: true}
									)
									.then(function(res) {
										// console.log(res)
										if (res.body.code == 200) {
											console.log(res.body.data);
											this.video_url = res.body.data.video_url;
											// this.video_img = res.body.data.video_img;
											this.video_img = 'https://pp.myapp.com/ma_icon/0/icon_42395675_1561451366/96';
											this.$emit('upvideo', res.body.data, uploadInfo.videoId);//向父组件传值
											self.statusText = '文件上传完成!'
										}else {
											Toast(res.body.msg);
										}
									}),
									function(res) {
										// console.log(res)
									}
								},300)
								
							},
							// 文件上传失败
							onUploadFailed: function(uploadInfo, code, message) {
								// console.log("onUploadFailed: file:" + uploadInfo.file.name + ",code:" + code + ", message:" + message)
								self.statusText = '文件上传失败!'
							},
							// 取消文件上传
							onUploadCanceled: function(uploadInfo, code, message) {
								// console.log("Canceled file: " + uploadInfo.file.name + ", code: " + code + ", message:" + message)
								self.statusText = '文件已暂停上传'
							},
							// 文件上传进度，单位：字节, 可以在这个函数中拿到上传进度并显示在页面上
							onUploadProgress: function(uploadInfo, totalSize, progress) {
								console.log("onUploadProgress:file:" + uploadInfo.file.name + ", fileSize:" + totalSize + ", percent:" + Math.ceil(
									progress * 100) + "%")
								let progressPercent = Math.ceil(progress * 100)
								self.authProgress = progressPercent
								self.statusText =  Math.ceil(progress * 100) + "%"
							},
							// 上传凭证超时
							onUploadTokenExpired: function(uploadInfo) {
								// 上传大文件超时, 如果是上传方式一即根据 UploadAuth 上传时
								// 需要根据 uploadInfo.videoId 调用刷新视频上传凭证接口(https://help.aliyun.com/document_detail/55408.html)重新获取 UploadAuth
								// 然后调用 resumeUploadWithAuth 方法, 这里是测试接口, 所以我直接获取了 UploadAuth
								self.$http.post(
									self.api + '/api/app/uploadvideo/refreshUploado', 
									{VideoId: uploadInfo.videoId},
									{emulateJSON: true}
								)
								.then(function(res) {
									// console.log(res)
									if (res.body.code == 200) {
										// console.log(res.body.data)
										let uploadAuth = res.body.data.UploadAuth
										let uploadAddress = res.body.data.UploadAddress
										let videoId = res.body.data.VideoId
										uploader.resumeUploadWithAuth(uploadAuth)
										// console.log('upload expired and resume upload with uploadauth ' + uploadAuth)
									}else {
										Toast(res.body.msg);
									}
								}),
								function(res) {
									// console.log(res)
								}
								self.statusText = '文件超时...'
							},
							// 全部文件上传结束
							onUploadEnd: function(uploadInfo) {
							
								// console.log("onUploadEnd: uploaded all the files")
								// self.statusText = '文件上传完毕'
							}
						})
						return uploader
					}
				}
			}
		</script>