阿里云视频上传

阿里云视频，初步接触，根据阿里云文本档，我引用的时候，大致步骤是这样的，有什么问题请大家指正。
首先，引用阿里云视频文件，这个文件可以在阿里云官方文档找到并且在main.js里面添加上处理兼容问题的代码 data赋值变量

<script src="/static/lib/aliyun-upload-sdk/lib/es6-promise.min.js"></script>
<script src="/static/lib/aliyun-upload-sdk/lib/aliyun-oss-sdk-5.3.1.min.js"></script>
<script src="/static/lib/aliyun-upload-sdk/aliyun-upload-sdk-1.5.0.min.js"></script>
//兼容IE11   maim.js
if (!FileReader.prototype.readAsBinaryString) {
    FileReader.prototype.readAsBinaryString = function (fileData) {
       var binary = "";
       var pt = this;
       var reader = new FileReader();      
       reader.onload = function (e) {
           var bytes = new Uint8Array(reader.result);
           var length = bytes.byteLength;
           for (var i = 0; i < length; i++) {
               binary += String.fromCharCode(bytes[i]);
           }
        //pt.result  - readonly so assign binary
        pt.content = binary;
        pt.onload()
    }
    reader.readAsArrayBuffer(fileData);
    }
}
//视频上传相关参数
data(){
	return{
		timeout: '',
		partSize: '',
		parallel: '',
		retryCount: '',
		retryDuration: '',
		region: 'cn-shanghai',
		userId: '',
		file: null,
		authProgress: 0, //上传进度
		uploadDisabled: true,
		resumeDisabled: true,
		pauseDisabled: true,
		uploader: null,
		filename: '请先选择需要上传的文件', //文件名称
		filesize: 0, //文件大小
	}
}

其次，就是上传文件

//点击上传视频
<input type="file" id="fileUpload" @change="fileChange($event)" />
fileChange(e) {
			this.file = e.target.files[0];
			if (!this.file) {
				alert('请先选择需要上传的文件!');
				return;
			}
			var Title = this.file.name;
			this.filename = this.file.name;
			let size = 0;
			if (this.file.size >= 1024 * 1024) {
				size = (this.file.size / 1024 / 1024).toFixed(1) + 'M';
			} else if (this.file.size < 1024 * 1024 && this.file.size >= 1024) {
				size = (this.file.size / 1024).toFixed(1) + 'K';
			} else {
				size = this.file.size + 'B';
			}
			this.filesize = size;
			var userData = '{"Vod":{}}';
			if (this.uploader) {
				this.uploader.stopUpload();
				this.authProgress = 0;
				this.statusText = '';
			}
			this.uploader = this.createUploader();
			console.log(this.file);
			this.file.cid = this.searchData.cid;
			this.file.uid = this.uid;
			this.uploader.addFile(this.file, null, null, null, userData);
			this.uploadDisabled = false;
			this.pauseDisabled = true;
			this.resumeDisabled = true;
		},

然后点击上传

<div class="btn-block" @click="authUpload">开始上传</div>
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 videoId = '';
			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,//这个阿里云id根据文档是必须要填写的，需要后台传入，但是测试不传入也是可以上传成功的，但是jsdk文件会报错
				// 添加文件成功
				addFileSuccess: function(uploadInfo) {
					self.uploadDisabled = false;
					self.resumeDisabled = false;
					self.statusText = '添加文件成功, 等待上传...';
					console.log('addFileSuccess: ' + uploadInfo);
				},
				// 开始上传
				onUploadstarted: function(uploadInfo) {
					// console.log(this.uid,this.searchData.cid)
					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)
					//调用接口的这些参数根据需求自定义
					dataApi
						.getVideoConfig({
							filename: uploadInfo.file.name,
							uid: uploadInfo.file.uid,
							cid: uploadInfo.file.cid
						})
						.then(res => {
							console.log(res);
							let uploadAuth = res.data.info.UploadAuth;
							let uploadAddress = res.data.info.UploadAddress;
							videoId = res.data.info.VideoId;
							uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress, videoId);
						})
						.catch(err => {
							console.log(err);
						});
				},
				// 文件上传成功
				onUploadSucceed: function(uploadInfo) {
					self.statusText = '文件上传成功!';
					console.log('文件上传成功');
					dataApi
						.addUnitanalyse({
							unit: uploadInfo.file.uid,
							courseid: uploadInfo.file.cid,
							videoid: videoId
						})
						.then(res => {
							console.log(res);
						})
						.catch(err => {
							console.log(err);
						});
					self.getJiangyiList();
				},
				// 文件上传失败
				onUploadFailed: function(uploadInfo, code, message) {
					self.statusText = '文件上传失败!';
					console.log('文件上传失败');
					self.$message({
						message: '文件上传失败',
						type: 'warning'
					});
				},
				// 取消文件上传
				onUploadCanceled: function(uploadInfo, code, message) {
					self.statusText = '文件已暂停上传';
					console.log('文件已暂停上传');
					self.$message({
						message: '文件已暂停上传',
						type: 'warning'
					});
				},
				// 文件上传进度，单位：字节, 可以在这个函数中拿到上传进度并显示在页面上
				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 = '文件上传中...';
				},
				// 上传凭证超时
				onUploadTokenExpired: function(uploadInfo) {
					// 上传大文件超时, 如果是上传方式一即根据 UploadAuth 上传时
					// 需要根据 uploadInfo.videoId 调用刷新视频上传凭证接口(https://help.aliyun.com/document_detail/55408.html)重新获取 UploadAuth
					// 然后调用 resumeUploadWithAuth 方法, 这里是测试接口, 所以我直接获取了 UploadAuth
					// let refreshUrl =
					//   "https://demo-vod.cn-shanghai.aliyuncs.com/voddemo/RefreshUploadVideo?BusinessType=vodai&TerminalType=pc&DeviceModel=iPhone9,2&UUID=59ECA-4193-4695-94DD-7E1247288&AppVersion=1.0.0&Title=haha1&FileName=xxx.mp4&VideoId=" +
					//   uploadInfo.videoId;
					// axios.get(refreshUrl).then(({ data }) => {
					//   let uploadAuth = data.UploadAuth;
					//   uploader.resumeUploadWithAuth(uploadAuth);
					//   console.log(
					//     "upload expired and resume upload with uploadauth " + uploadAuth
					//   );
					// });
					dataApi
						.getVideoConfig({
							filename: uploadInfo.file.name,
							uid: uploadInfo.file.uid,
							cid: uploadInfo.file.cid
						})
						.then(res => {
							// console.log(res);
							let uploadAuth = res.data.info.UploadAuth;
							let uploadAddress = res.data.info.UploadAddress;
							videoId = res.data.info.VideoId;
							uploader.resumeUploadWithAuth(uploadAuth);
						})
						.catch(err => {
							console.log(err);
						});
					self.statusText = '文件超时...';
					self.$message({
						message: '文件超时...',
						type: 'warning'
					});
				},
				// 全部文件上传结束
				onUploadEnd: function(uploadInfo) {
					console.log('onUploadEnd: uploaded all the files');
					self.statusText = '文件上传完毕';
					self.getJiangyiList();
				}
			});
			return uploader;
		}