前端上传视频至阿里云

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 = 0this.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 = thislet 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 = progressPercentself.statusText = '文件上传中...'},// 上传凭证超时onUploadTokenExpired: function (uploadInfo) {// 上传大文件超时, 如果是上传方式一即根据 UploadAuth 上传时// 需要根据 uploadInfo.videoId 调用刷新视频上传凭证接口(https://help.aliyun.com/document_detail/55408.html)重新获取 UploadAuth// 然后调用 resumeUploadWithAuth 方法, 这里是测试接口, 所以我直接获取了 UploadAuthself.statusText = '文件超时...'},// 全部文件上传结束onUploadEnd: function (uploadInfo) {console.log("onUploadEnd: uploaded all the files")self.statusText = '文件上传完毕'}})return uploader
}

前端上传视频至阿里云相关推荐

vue + elementUI upload组件，前端上传视频到阿里云视频点播
1.视频上传阿里云,首先引用阿里云的sdk,放在所需界面中引用 import '@/utils/aliyun-oss-sdk-6.13.0.min.js';import '@/utils/aliyun ...
批量上传视频到阿里云
批量上传视频到阿里云这段时间项目里有一个上传视频到阿里云的功能是我来负责写的,之前一直没有写过这种功能,感觉很难的亚子,但是后来仔细研究了一遍发现也没想象中那么难,最后经过不懈的努力也算是搞出来了哈 ...
上传视频到阿里云服务器
######上传视频到阿里云服务器工具类 1.maven坐标 <dependency><groupId>com.aliyun</groupId><artifa ...
Springboot上传视频到阿里云（视频点播）和aliyun-java-sdk-vod依赖报红问题
一.pom.xm中导入依赖 <dependency><groupId>com.aliyun</groupId><artifactId>aliyun-ja ...
easyswoole上传视频到阿里云（继承上面easyswoole视频上传大小限制取消代码）
参考网址 https://help.aliyun.com/document_detail/61388.html 在easuswoole根目录下面的ini文件夹下,新建aliyun.ini access ...
vue 直接上传视频到阿里云oss
1.安装oss npm install ali-oss --save 2.在src下的util文件创建utils.js工具类 /*** 时间日期格式化* @param format* @returns ...
Android（安卓）上传文件到阿里云点播，阿里云点播转码
Android(安卓)上传文件到阿里云点播,阿里云点播转码文章目录 Android(安卓)上传文件到阿里云点播,阿里云点播转码一:登录阿里云点播平台配置添加转码模板组 1:需要什么参数,可自行填写 ...
微信小程序直接上传文件到阿里云OSS组件封装
微信小程序直接上传文件到OSS 1. 封装公共方法在根目录utils目录新建一个upload文件夹: // utils/upload/base64.jsvar base64EncodeChars = ...
mac SCp上传文件到阿里云服务器centos
1.mac链接远程阿里云服务器centos命令: ssh -A -p 22 root@ip 2.mac上传文件到阿里云centos: 3.阿里云服务器weapps下文件删除命令: 4.上传文件相关 m ...

前端上传视频至阿里云

前端上传视频至阿里云相关推荐

最新文章

热门文章