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

news2024/9/22 5:26:17

问题背景

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

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

凭证上传

官方文档: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
}

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

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 数据库系统 [卡内基梅…

【IDA疑难杂症修复】

我们在使用IDA进行逆向分析的时候,会遇到一些问题,这篇文章来带领大家学习IDA中疑难杂症的修复:函数大小限制,栈不平衡,switch无法识别(跳转表修复),ida Decompile as call。 一.函…

Redis学习(一)数据类型、Java中使用redis、缓存概念

文章目录 常用数据结构String类型Hash类型List类型Set类型SortedSet 类型 通用命令key的层级结构 Spring Data Redis快速入门RedisTemplate的序列化方式StringRedisTemplateRedisTemplate的Hash类型操作 实战操作短信登录发送验证码校验登录信息校验登录状态 商家查询缓存缓存更…

antdesignpro组件Upload传excel文件到后端flask的两种方案

(特别提醒:后端xlrd新版本不支持xlsx文件,所以暂用xls文件进行上传) 1.第一种方案:组件接收到excel文件,然后解析成list数据,解析是要用到XLSX( 安装插件:npm i xlsx --save impor…

【Leetcode】21.合并两个有序链表

一、题目 1、题目描述 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 示例1: 输入:l1 = [1,2,4], l2 = [1,3,4] 输出:[1,1,2,3,4,4]示例2: 输入:l1 = [], l2 = [] 输出:[]示例3: 输入:l1 = [], l2 = [0] 输…

Cesium 常用标绘线、面、矩形、圆、曲面、曲线、攻击箭头、钳击箭头,标绘与修改。

前言:直接放效果图,符合就往下看,不符合出门右转。 由于篇幅有限,只贴出各个标绘的关键代码。 1、线段 基于坐标点,加载不同的材质。 //动态加载 const entity this._viewer.entities.add({polyline: {positions: …

K8S网络管理

这里写目录标题 1 网络管理1.1Service1.1.1 网络体系1.1.2 工作模型1.1.3 SVC实践1.1.4 IPVS实践 1.2 其他资源1.2.1 域名服务1.2.2 CoreDNS1.2.3 无头服务 1.3 flannel方案1.3.1 网络方案1.3.2 flannel1.3.3 主机网络 1 网络管理 1.1Service 1.1.1 网络体系 学习目标 这一…

Shell脚本 中运行sudo命令

在shell脚本中有时需要使用sudo进行提权,运行包含这类脚本的文件时通常需要我们在终端输入sudo密码,但是在一些无人值守的应用中显然就不太适合了。本文通过构建一个多用户的ubuntu操作环境,来展示脚本中需要使用sudo命令时的应用场景。 我们…

基于vue3+vite+ts,使用nexus发布组件库

1、前提条件 已部署nexus3,可参考: Ubuntu部署和体验Nexus3-腾讯云开发者社区-腾讯云 代理设置: 【Nexus】通过Nexus搭建Npm私库_猫巳的博客-CSDN博客 Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一…

Java --- springboot3之可观测性

目录 一、可观测性 二、定制健康监控的端点 三、定制metrics 四、整合PrometheusGrafana 一、可观测性 导入pom依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-actuator</artifactId></d…

如何从PCB上直接启动Power DC直流压降仿真分析工具

如何从PCB上直接启动Power DC直流压降仿真分析工具 POWER DC的启动除了可以通过POWER DC.exe直接启动外,还可以直接通过Allegro的PCB界面直接启动,二者软件是支持关联的。如何启动,具体操作如下 用166或者172版本打开PCB点击File点击Change Edi

JVM源码剖析之JVM层面调用Java方法

先看以下2个案例。 Runnable runnable () -> {System.out.println(1); }; new Thread(runnable).start(); 为什么调用Thread的start方法就能执行Runnable的代码&#xff1f; public static void main(String[] args) {System.out.println(1); } 作为Java开发者&#x…

基于差速驱动移动基座的三维变型机器人轨迹优化

在执行任务时&#xff0c;服务机器人的功能结构变化可能会限制其自主导航能力&#xff0c;从而影响其行动力。本文的研究&#xff0c;旨在解决复杂三维环境中可变形机器人的轨迹规划问题&#xff0c;特别是应用最为广泛的基于差速驱动移动基座的移动机器人的轨迹规划。 这种全…

如何下载一个网站的全部网页文件 如何极速下载网页上的文件

许多网站上都有非常多的内容&#xff0c;一个个下载比较麻烦&#xff0c;那么我们如何下载一个网站的全部网页文件&#xff1f;我们可以使用下载软件抓取整个站点上检索出所有内容&#xff0c;然后通过过滤器选择自己需要的内容。如何极速下载网页上的文件&#xff1f;我们可以…

电脑-问题

如果使用了小米路由器&#xff0c;有望 但是平凡跳转到miwifi进行检查&#xff0c;或者显示证书问题 在浏览器设置里搜索dns&#xff0c;将 确定如何通过安全连接来连接到网站后面部分改成自定义&#xff1a; https://dns.alidns.com/dns-query 主要原因是&#xff1a; edge新…

C++图形开发(4):下落的小球

文章目录 1.小球自上而下依次出现2.下落的小球低配版3.下落的小球高配版 1.小球自上而下依次出现 首先&#xff0c;我们来使小球自上而下依次出现&#xff1a; 分析&#xff1a;要使小球自上而下依次出现&#xff0c;也就是指在一个小球出现之后让程序暂停一段时间&#xff0c…

基于单片机电子密码锁射频卡识别指纹门禁密码锁系统的设计与实现

功能介绍 通过指纹进行开锁或者是按键输入当前的密码&#xff0c;修改密码&#xff0c;对IC卡可以进行注册&#xff0c;删除。当有RFID卡进入到读卡器的读卡范围内时&#xff0c;则会自动读取卡序列号&#xff0c;单片机根据卡的序列号对卡进行判断。若该卡是有效卡&#xff0c…

【 SVG 】二、SVG 容器元素

一、本文概述 本文所介绍的 svg 中元素&#xff0c;通常不会直接作为直接展示元素&#xff0c;而是配合其他基础元素&#xff0c;以实现指定功能的图层组&#xff0c;本文围绕 svg 常用容器元素&#xff0c;进行实战应用&#xff1b; 二、 SVG 容器元素&#xff08;常用&#x…

「软件测试」最全面试问题和回答,全文背熟不拿下offer算我输

一般要应聘关于测试的工作&#xff0c;面试题会不会很难?下面小编整理了软件测试面试题及答案&#xff0c;欢迎参考! 一、引言 1.1 文档目的 本次文档是为了收集在面试中遇到的一问题与常见的一些答案并不是唯一答案 二、职业规划 2.1 简单的自我介绍下 面试宫&#xff…

层层剥开Transformer;Windows Copilot初版非常简陋

&#x1f989; AI新闻 &#x1f680; 微软Win11引入Windows Copilot功能&#xff0c;但初版非常简陋 摘要&#xff1a;微软在Win11 Build 23493预览版更新中引入了Windows Copilot功能&#xff0c;该功能在任务栏上新增了一个图标按钮。点击按钮后&#xff0c;屏幕右侧会跳出…