阿里云SDK上传视频

1、老样子，先看效果图

2、首先到阿里云下载所需要用到的SDK

3、下载好的，解压之后，目录以及运行起来是以下这个样子的

4、在实际项目中引用，先将SDK添加到项目中，放到public目录下

5、在public文件下的index.html引入

  <script src="<%= BASE_URL %>js/aliyun-upload-sdk/lib/es6-promise.min.js"></script><script src="<%= BASE_URL %>js/aliyun-upload-sdk/lib/aliyun-oss-sdk-6.17.1.min.js"></script><script src="<%= BASE_URL %>js/aliyun-upload-sdk/aliyun-upload-sdk-1.5.4.min.js"></script>

6、文件中使用
template中：

        <div class="video-style"><videov-if="videoShow"controlsloopmuted:src="detail.videoUrl"style="width: 20%"/><el-progress v-if="progressShow" :percentage="100" type="circle"><template #default="{}"><span class="percentage-value">{{ authProgress }}%</span><br /><span class="percentage-label">{{ statusText }}</span></template></el-progress><div class="video"><el-uploadaction="":auto-upload="false":limit="1":on-change="handleSuccess_mp4":show-file-list="false"><el-button size="small" type="primary">选择视频</el-button></el-upload><el-button:disabled="uploadDisabled"size="small"style="margin-left: 10px"type="primary"@click="authUpload">开始上传</el-button><el-buttonv-if="videoShow"style="margin-left: 15px"type="danger"@click="handleRemove_mp4()">删除</el-button><div class="demonstration1" style="margin-left: 15px">仅支持mp4格式,限制2GB</div></div></div>

script中data数据（actionVideo这个是获取上传凭证接口，问后端要，后端会给）：

        fileList: [],timeout: '60000',partSize: '1048576',parallel: '5',retryCount: '3',retryDuration: '2',region: 'cn-shanghai',userId: '', // 这个id问后端要file: null,authProgress: 0,uploadDisabled: true,uploader: null,statusText: '',videoShow: false,progressShow: false,

methods中的方法(我这里用的是vue3写的，其实没差别，只是用了箭头函数)

      const handleSuccess_mp4 = (e) => {state.videoShow = falsestate.file = e.rawif (!state.file) {// alert("请先选择需要上传的文件!")proxy.$baseMessage('请先选择需要上传的文件','error','vab-hey-message-success')return}let userData = '{"Vod":""}'if (state.uploader) {state.uploader.stopUpload()state.authProgress = 0state.statusText = ''}state.uploader = createUploader()state.uploader.addFile(state.file, null, null, null, userData)}const authUpload = () => {console.log(state.uploader)// 然后调用 startUpload 方法, 开始上传if (state.uploader !== null) {state.uploader.startUpload()state.uploadDisabled = truestate.progressShow = true}}const createUploader = () => {let uploader = new window.AliyunUpload.Vod({  // 因为使用的vue3，所以用window才能获取到，在vue下面就不用使用window，直接使用AliyunUpload就好了timeout: state.timeout || 60000,partSize: Math.round(state.partSize || 1048576),parallel: state.parallel || 5,retryCount: state.retryCount || 3,retryDuration: state.retryDuration || 2,region: 'cn-beijing',userId: state.userId,// 添加文件成功addFileSuccess: function () {state.uploadDisabled = falsestate.statusText = '等待上传'},// 开始上传onUploadstarted: function (uploadInfo) {// 如果是 UploadAuth 上传方式, 需要调用 uploader.setUploadAuthAndAddress 方法// 如果是 UploadAuth 上传方式, 需要根据 uploadInfo.videoId是否有值，调用点播的不同接口获取uploadauth和uploadAddress// 如果 uploadInfo.videoId 有值，调用刷新视频上传凭证接口，否则调用创建视频上传凭证接口// 注意: 这里是测试 demo 所以直接调用了获取 UploadAuth 的测试接口, 用户在使用时需要判断 uploadInfo.videoId 存在与否从而调用 openApi// 如果 uploadInfo.videoId 存在, 调用 刷新视频上传凭证接口// 如果 uploadInfo.videoId 不存在,调用 获取视频上传地址和凭证接口if (!uploadInfo.videoId) {let createUrl = state.actionVideoaxios.get(createUrl).then((res) => {let data = res.data.data.detaillet uploadAuth = data.uploadAuthlet uploadAddress = data.uploadAddresslet videoId = data.videoIdstate.detail.videoUrl = data.playUrlstate.detail.videoId = data.videoIduploader.setUploadAuthAndAddress(uploadInfo,uploadAuth,uploadAddress,videoId)})state.statusText = '文件开始上传'} else {// 如果videoId有值，根据videoId刷新上传凭证let createUrl =state.actionVideo + '?VideoId=' + uploadInfo.videoIdaxios.get(createUrl).then((res) => {let data = res.data.data.detaillet uploadAuth = data.uploadAuthlet uploadAddress = data.uploadAddresslet videoId = data.videoIdstate.detail.videoUrl = data.playUrlstate.detail.videoId = data.videoIduploader.setUploadAuthAndAddress(uploadInfo,uploadAuth,uploadAddress,videoId)})state.statusText = '文件开始上传'}},// 文件上传成功onUploadSucceed: function (uploadInfo) {state.videoShow = truestate.progressShow = falseconsole.log('文件上传成功!', uploadInfo)state.statusText = '上传成功'},// 文件上传失败onUploadFailed: function () {state.statusText = '文件上传失败!'},// 取消文件上传onUploadCanceled: function (uploadInfo, code, message) {console.log('文件已暂停上传', uploadInfo, code, message)state.statusText = '文件已暂停上传'},// 文件上传进度，单位：字节, 可以在这个函数中拿到上传进度并显示在页面上onUploadProgress: function (uploadInfo, totalSize, progress) {let progressPercent = Math.ceil(progress * 100)state.authProgress = progressPercentstate.statusText = '上传中'},// 上传凭证超时onUploadTokenExpired: function (uploadInfo) {// 上传大文件超时, 如果是上传方式一即根据 UploadAuth 上传时// 需要根据 uploadInfo.videoId 调用刷新视频上传凭证接口(https://help.aliyun.com/document_detail/55408.html)重新获取 UploadAuth// 然后调用 resumeUploadWithAuth 方法, 这里是测试接口, 所以我直接获取了 UploadAuthlet refreshUrl = state.actionVideo + '?VideoId=' + uploadInfo.videoIdaxios.get(refreshUrl).then(({ data }) => {let uploadAuth = data.UploadAuthuploader.resumeUploadWithAuth(uploadAuth)console.log('upload expired and resume upload with uploadauth ' + uploadAuth)})state.statusText = '文件超时...'},// 全部文件上传结束onUploadEnd: function (uploadInfo) {console.log('文件上传完毕', uploadInfo)state.statusText = '上传完毕'},})return uploader}

凭证接口返回的字段，uploadAuth，uploadAddress，videoId这几个字段肯定要有的

阿里云SDK上传视频相关推荐

【springboot】实现阿里云视频点播上传视频
阿里云视频点播 1.开通视频点播服务,选择按流量计费,对于个人项目来说,相当于免费. 2.开启存储管理 3.设置转码模板组.设置加密,如果不加密,别人只要获取到你视频的url就可以免费观看,但进行了加 ...
阿里云视频点播上传视频和获取视频播放地址
参考官方文档: Python上传SDK-普通文件上传.获取播放地址本文只对上传视频和获取单个视频播放地址操作.更多案例如批量获取所有视频列表等操作请直接参考官方文档: 媒体管理一.上传视频:上传完 ...
使用阿里云视频点播上传视频
目录前言一.目的二.实现步骤 1.准备操作 2.主要使用模块 2.1. 上传音频 2.2. 添加转码设置 3.搭建视频点播环境 3.1.配置Maven仓库 3.2.添加jar依赖 3.3.上传视 ...
小程序中使用阿里云oss上传视频怎么获得视频截图?
在视频地址后面加上如下的后缀,就可以获取视频内部帧图片,当作封面使用. ?x-oss-process=video/snapshot,t_1000,m_fast ?x-oss-process=video ...
thinkPHP 阿里云OSS 上传文件、直接下载
阿里云OSS 上传文件.直接下载 1. 安装OSS SDK composer require aliyuncs/oss-sdk-php 2. thinkPHP接口 public function up ...
web利用腾讯云点播上传视频
web利用腾讯云点播上传视频到云服务器第一步导入 <script src="//imgcache.qq.com/open/qcloud/js/vod/sdk/ugcUploader. ...
springboot整合阿里云oss上传的方法示例
这篇文章主要介绍了springboot整合阿里云oss上传的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 OSS申请和 ...
阿里云Oss上传（Android版）
写了个简单的阿里云Oss上传,封装成一个类,可以直接使用首先在您的gradle中配置sdk: dependencies {compile 'com.aliyun.dpa:oss-android-sd ...
阿里云OSS上传速度优化技巧
阿里云OSS上传速度优化技巧: 使用OSS SDK:使用OSS SDK进行上传可提高上传速度,避免使用HTTP PUT方法进行上传. 增加并发请求:通过增加并发请求的数量,可以提高上传速度.但是需要注 ...

阿里云SDK上传视频

阿里云SDK上传视频相关推荐

最新文章

热门文章