aliyun-oss-sdk阿里云OSS视频上传(断点续传)前端实现

问题背景

最近上传视频的功能,突然炸了,两年没动的代码,突然不行辽,首次上传成功,后面继续上传就可以,但凡有一次上传失败,再上传文件就不行。

这里博主使用的是凭证上传方式哈。

凭证上传

官方文档:Web(JavaScript)上传SDK

查看了官方文档,确实是提到了,如使用1.5.3之前版本重新上传,请修改待上传文件名称,不要与上传中断的文件重名,避免报错。

image.png

项目使用的确实是1.5.0版本,所以我首先是把upload-sdk升级到了1.5.5

如果需要下载对应版本,可以看这里:Javascript上传SDK

upload-sdk升级之后,oss-sdk用的依然是6.8.0,这时候上传还是不行,首次上传可以成功,但是如果有重复名称的文件,再次上传,就会一直失败,报404

96744a0c17851051f37fd1cd5fbe48bd.png

升级版本

询问了阿里云技术人员,被告知1.5.5对应的是6.17.1,所以又升级了oss-sdk。

更新了版本之后,如果是新文件,上传和续传没问题了,只是如果文件名字和之前的相同,上传会报403,续传会报404

a988212e012ad2827b7115bebc150722.png

4f75c9c456511780a17673fed5b90ffc.png

这是缓存引起的,在new AliyunUpload.Vod({}) 的地方,新增个 localCheckpoint: true ,并且把本地存储清空,就可以了,或者也可以重命名文件。

代码

createUploader (i) {
        let self = this
        let uploader = new AliyunUpload.Vod({
          timeout: 60000,
          partSize: 1048576, // 分片大小默认1M,不能小于100K
          parallel: 5, // 并行上传分片个数,默认5
          retryCount: 3, // 网络原因失败时,重新上传次数,默认为3
          retryDuration: 2, // 网络原因失败时,重新上传间隔时间,默认为2秒
          region: "cn-shanghai", // 上传到点播的地域
          userId: "190917894512121",
          localCheckpoint: true,//此参数是禁用服务端缓存,不影响断点续传
          // 开始上传
	  // 如果是 UploadAuth 上传方式, 需要调用 uploader.setUploadAuthAndAddress 方法
          // 如果是 UploadAuth 上传方式, 需要根据 uploadInfo.videoId是否有值,调用点播的不同接口获取uploadauth和uploadAddress
	  // 如果 uploadInfo.videoId 有值,调用刷新视频上传凭证接口,否则调用创建视频上传凭证接口
	  // 如果 uploadInfo.videoId 存在, 调用 刷新视频上传凭证接口(https://help.aliyun.com/document_detail/55408.html)
          // 如果 uploadInfo.videoId 不存在,调用 获取视频上传地址和凭证接口(https://help.aliyun.com/document_detail/55407.html)
          onUploadstarted: function (uploadInfo) {
            if (!uploadInfo.videoId) {
              uploadVideoAuthApi(self.vedioData[i]).then((res) => {
                self.uploadDisabled = true
                let { uploadAuth, uploadAddress, videoId } = res.data.operateCallBackObj;
                uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress, videoId);
                uploader.startUpload()
              })
            } else {
	      // 如果videoId有值,根据videoId刷新上传凭证
              refreshUploadVideoAuthApi(uploadInfo.videoId).then(res => {
                let {uploadAuth, uploadAddress, videoId} = res.data.operateCallBackObj
                uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress, videoId)
                uploader.startUpload()
              })
            }
          },
          // 文件上传成功
          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
            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)
            })
            self.statusText = '文件超时...'
          },
          // 全部文件上传结束
          onUploadEnd: function (uploadInfo) {
            console.log("onUploadEnd: uploaded all the files")
            self.statusText = '文件上传完毕'
          }
        })
   return uploader
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/34227.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

基于Layui实现管理页面

基于Layui实现的后台管理页面(仅前端) 注:这是博主在帮朋友实现的一个简单的系统前端框架(无后端),跟大家分享出来,可以直接将对应菜单跟html文件链接起来,页面使用标签页方式存在&…

SpringBoot2+Vue2实战(九)集成Echarts

Vue下载Echarts npm i echarts -S echarts官网 快速上手 - Handbook - Apache ECharts2 引入: import * as echarts from "echarts" 一、示例 EchartsController RestController RequestMapping("/echarts") public class EchartsContr…

HBase-问题

最终理解HBase数据模型的关键在于稀疏、分布式、多维、排序的映射。其中映射map指代非关系型数据库的key-Value结构。 1.怎么理解稀疏? 不同的行有不同的列,这就叫稀疏 有的行有3个列,有的行有2个列,那么2个列的在显示的时候&a…

Spring 项目过程及如何使用 Spring

文章目录 1.创建 Spring 项目步骤1.1 创建 Maven 项目1.2添加 Spring 框架支持1.3 添加启动项2.如何使用 Spring2.1 存储 Bean 对象2.1.1 创建 Bean对象2.1.2 将 Bean对象注册到容器中 2.2 获取并使用 Bean对象2.2.1 使用 ApplicationContext 获取对象2.2.2 使用 BeanFactory 获…

四、构建高可用的 Eureka-Server 集群

5.1 对刚才的 eureka-server 修改配置文件 5.1.1 server-1 server:port: 8761 #为什么是 8761,其他端口就报错spring:application:name: eureka-server #服务名称eureka:client:fetch-registry: true #是否拉取服务列表register-with-eureka: true #是否注册自己&…

matlab将数据写入到excel中

第一种: 将数据转化为cell块,从A1单元格写起 % xlswrite(info_10*2.xls ,sheet1,B2:B4) clear; clc; a[1 2 3 4 5 6 ];%三组数据 b[11 22 33 44 55 66]; c[12 23 34 45 56 61]; data [a b c];%把数据保存到data中,其中a的表示转置 [m p]si…

LED显示屏四大连接方式

LED显示屏的四大连接方式是数据连接、电源连接、信号输入连接和控制系统连接。以下是对每种连接方式的详细说明: 1,数据连接: 数据连接用于传输显示内容的数据信号到LED显示屏。常见的数据连接方式包括: 串行连接(Serial Connecti…

DevOps实现自动化发布实操

DevOps实现自动化发布流程 本篇文章来自 B站视频(部分步骤与视频存在差异) 流程图及原理 本地编写代码提交至远程仓库Jenkins(基于Docker)通过内置Git获取提交的代码,通过Maven进行打包,形成可执行文件&a…

苹果app用发布证书打包后怎么装手机测试

一、背景 iOS 的开发证书打包后可以通过爱思助手安装到手机上测试,但发布 (Production) 证书是不允许安装在手机上的。而在实际开发过程中,尽管通过开发证书测试过了,iOS生产包仍然可能会出现一些问题,需对生产包也进行测试。 而…

Tdengine 时序数据库-安装与客户端连接

使用 TDengine 时序数据库的版本是 2.4.0.0 使用的安装RPM的安装方便安装 TDengine-server-2.4.0.0-Linux-x64.rpm 1. 安装指令: rpm -ivh TDengine-server-2.4.0.0-Linux-x64.rpm [rootnode3 server]# rpm -ivh TDengine-server-2.4.0.0-Linux-x64.rpm Verifying... …

赛效:如何将PDF文件免费转换成Word文档

1:在网页上打开wdashi,默认进入PDF转Word页面,点击中间的上传文件图标。 2:将PDF文件添加上去之后,点击右下角的“开始转换”。 3:稍等片刻转换成功后,点击绿色的“立即下载”按钮,将…

android Surface(1, 2)

android Surface(1, 2) android的Surface相关内容从底层依次往上分别是: 1.frameBuffer,简称fb,对于同一个android系统,可以同时存在多个frameBuffer,本机是fb0,依次外接时,fb1, fb2, ……fbn…

怎样在文章末尾添加尾注(将尾注的数字变为方括号加数字)

在进行文章编写或者需要添加注解时,需要进行尾注的添加,下面将详细说明如何进行尾注的添加 操作 首先打开需要进行添加尾注的文档,将光标移动至需要进行添加尾注的文字后。 紧接着在上方工具栏中,选择引用,在引用页…

短视频矩阵-短视频seo源码开发搭建

开发场景:抖音seo,短视频seo,抖音矩阵,短视频矩阵源码开源 一、 短视频矩阵源码需要掌握以下技术: 1. 视频编码技术 短视频矩阵系统利用视频编码技术,将视频文件进行压缩和解压缩,实现了高质…

CMU 15-445 -- Hash Tables - 04

CMU 15-445 -- Hash Tables - 04 引言Hash TablesHash FunctionsHashing Scheme小结 Dynamic Hash TablesChained Hashing (链式哈希)Extendible Hashing(可扩展哈希)Linear Hashing(线性哈希) 总结 引言 本系列为 CMU 15-445 Fall 2022 Database Systems 数据库系统 [卡内基梅…

04_前端包管理工具模块化

注意事项: ​ 改模块代码不用重启服务器,修改config文件的时候需要重启服务器 ​ nvm的安装路径和node的安装路径不能在同一路径下面 ​ 有乱码问题使用管理员权限进行使用use方法 下载安装node ​ 使用命令进行安装 1.nvm list 查看已下载所有的node版本 2.nvm install…

leetcode146.手撸 LRU 算法(java)

LRU 缓存 LRU 缓存题目描述LRU 介绍LRU 算法设计代码实现 单调栈算法 LRU 缓存 来源:力扣(LeetCode) 链接:https://leetcode.cn/problems/lru-cache 题目描述 请你设计并实现一个满足 LRU (最近最少使用) 缓存 约束的数据结构。 实…

设计模式学习之抽象工厂模式

设计模式系列往期文章 设计模式学习之策略模式设计模式学习之策略模式在前端的应用设计模式学习之简单工厂模式设计模式学习之工厂方法模式 如果你已经理解了工厂方法模式,那你能够很快的明白抽象工厂模式。 温习:什么是工厂方法模式 我们先温习一下…

[muduo学习笔记]事件分发器(Channel、Poller)

此学习笔记参考施磊老师的muduo教学课程。 目的是搞懂 muduo 网络库的核心框架。EventLoop、channel 和 Poller 之间的关系 文章目录 1 Poller 抽象基类2 Channel3 模块的包含muduo模块梳理参考: 整体框架如下: muduo是基于 Reactor 模式的网络库&#…

【前端|HTML系列第2篇】HTML零基础入门之标签元素

大家好,欢迎来到前端入门系列的第二篇博客。在这个系列中,我们将一起学习前端开发的基础知识,从零开始构建网页和Web应用程序。本篇博客将为大家介绍HTML(超文本标记语言)常用标签元素,帮助零基础小白快速入…