1、开通阿里云服务，获取userId
官方文档地址：https://help.aliyun.com/document_detail/52204.html?spm=a2c4g.11186623.6.915.51366bd19lzWGq
2、下载第三方js库：
放在src/assets/lib文件夹下
3、引入使用第三方库：
告诉angular去哪加载库
在angular.json中找到“scripts”节点，加入如下配置：
"scripts": [ "src/assets/lib/aliyun-upload-sdk/lib/aliyun-oss-sdk-5.3.1.min.js", "src/assets/lib/aliyun-upload-sdk/aliyun-upload-sdk-1.5.0.min.js"]
4、声明库中的对象
将oss-sdk中的OSS对象和upload-sdk中的AliyunUpload对象声明到typescript中，以便在其他组件中使用，如果不做该声明在其他组件中是无法使用这两个对象的，会出现编译错误。
在typings.d.ts文件中加入:
declare var OSS: any;declare var AliyunUpload: any;
5、使用上传地址和凭证方式来上传视频
具体效果图：
html:
<input type="file" (change)="fileChange($event)"><span class="progress">上传进度: {{authProgress}} %</span>
ts:
fileChange(e) { this.file = e.target.files[0] if (!this.file) { this.message.warning("请先选择需要上传的文件!") return } 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)}authUpload() { // 然后调用 startUpload 方法, 开始上传 if (this.uploader !== null) { this.uploader.startUpload() }}createUploader() { let self = this let uploader = new AliyunUpload.Vod({ timeout: 60000, partSize: 1048576, parallel: 5, retryCount: 3, retryDuration: 2, userId: '1510586187070032', // 添加文件成功 addFileSuccess: function (uploadInfo) { self.statusText = '添加文件成功, 等待上传...' console.log("addFileSuccess: " + uploadInfo.file.name) self.authUpload(); }, // 开始上传 onUploadstarted: function (uploadInfo) { // 如果是 UploadAuth 上传方式, 需要调用 uploader.setUploadAuthAndAddress 方法 self.httpClient.post('/api/admin/video/uploadAuth', { file: uploadInfo.file.name, title: self.editData.name, poster: self.editData.poster }).subscribe((res: {}) => { const resData: any = res; let data = resData.result.message; self.editData.videoId = data.VideoId; uploader.setUploadAuthAndAddress(uploadInfo, data.UploadAuth, data.UploadAddress, data.VideoId) }) self.statusText = '文件开始上传...' console.log("onUploadStarted:" + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object) }, // 文件上传成功 onUploadSucceed: function (uploadInfo) { console.log("onUploadSucceed: " + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object) self.statusText = '文件上传成功!' }, // 文件上传失败 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 = '文件上传中...' }, // 上传凭证超时 onUploadTokenExpired: function (uploadInfo) { // 上传大文件超时, 如果是上传方式一即根据 UploadAuth 上传时 // 需要根据 uploadInfo.videoId 调用刷新视频上传凭证接口(https://help.aliyun.com/document_detail/55408.html)重新获取 UploadAuth // 然后调用 resumeUploadWithAuth 方法, 这里是测试接口, 所以我直接获取了 UploadAuth self.statusText = '文件超时...' }, // 全部文件上传结束 onUploadEnd: function (uploadInfo) { console.log("onUploadEnd: uploaded all the files") self.statusText = '文件上传完毕' } }) return uploader}
以上就上有关前端上传视频至阿里云的相关介绍，要了解更多阿里云上传视频内容请登录学步园。