当前位置: 首页 > article >正文

实现视频分片上传 OSS

访问 OSS 有两种方式,本文用到的是使用临时访问凭证上传到 OSS,不同语言版本的代码参考:

使用STS临时访问凭证访问OSS_对象存储(OSS)-阿里云帮助中心

1.安装并使用

首先我们要安装 OSS:

npm install ali-oss --save

接着我们创建一个 oss.js 文件,编写如下代码:

const axios = require("axios");
const OSS = require("ali-oss");export let client = null
export let object_name = ''export const getToken = async (ext) => {const formData = {ext: ext,csrf_token: window.sessionStorage.getItem('csrf-token'),}const res = await axios.post('your-path', formData)const token = res.data.dataclient = new OSS({region: token.region,accessKeyId: token.AccessKeyId,accessKeySecret: token.AccessKeySecret,stsToken: token.SecurityToken,authorizationV4: true,bucket: token.bucket,})object_name = token.object_name
}

后端接口返回的参数结构如图:

接下来即可使用 OSS 的 client.multipartUpload 进行分片上传:

const uploadArt = () => {const inputFile = document.createElement('input');inputFile.type = 'file';inputFile.accept = 'video/*'inputFile.multiple = false // 是否可以批量上传inputFile.addEventListener('change', async (event) => {const files = event.target.files;if (!files || files.length === 0) returnif (art_type.value === 'video') {const file = files[0]if (!file.name.endsWith('.mp4') && !file.name.endsWith('.mov')) {Modal.message({status: 'error',message: '请上传.mov或.mp4格式的视频!',duration: 3000})return}if (file.size > 300 * 1024 * 1024) {Modal.message({status: 'error',message: '视频不能大于300MB!',duration: 3000})return}const ext = file.name.split('.').pop()await getToken(ext)const res = await client.multipartUpload(object_name, file)if(res) {videoUrl.value = {url: window.sessionStorage.getItem("video_url"),object_name: window.sessionStorage.getItem("video_object_name")}const url = stripQueryParams(res.res.requestUrls[0])await autoUploadPoster(`${url}?x-oss-process=video/snapshot,t_0,f_jpg`) // 获取封面图并上传}}});inputFile.click();
}

上传之后拿到的视频 url 可以调用如下方法获取视频第一帧作为视频封面:

`${url}?x-oss-process=video/snapshot,t_0,f_jpg`

分片效果如图: 

上述代码是每次上传一个视频,如果想批量上传,可设置:

inputFile.multiple = true // 是否可以批量上传

并视频 for 循环遍历各个文件进行上传。可查看文档,参考上传的回调,获取上传进度等,本文主要讲述 OSS 封装的操作,视频上传仅为使用实例。

http://www.lryc.cn/news/2379326.html

相关文章:

  • 网络I/O学习(一)
  • 4:OpenCV—保存图像
  • Selenium-Java版(css表达式)
  • 产品更新丨谷云科技 iPaaS 集成平台 V7.5 版本发布
  • 深度学习让鱼与熊掌兼得
  • TDuckX 2.6 正式发布|API 能力开放,核心表单逻辑重构,多项实用功能上线。
  • LeetCode Hot100刷题——除自身以外数组的乘积
  • JAVA EE(进阶)_进阶的开端
  • PDF批量合并拆分+加水印转换 编辑 加密 OCR 识别
  • Go语言交替打印问题及多种实现方法
  • ArcGIS Pro调用多期历史影像
  • 10.11 LangGraph多角色Agent开发实战:生产级AI系统架构与性能优化全解析
  • 组态王|组态王中如何添加西门子1200设备
  • 发布时将多个bpl 打包成一个bpl的方法,或者说:不需要vcl60.bpl情况下 18.5K的exe 照常可以运行。
  • 6.2.2邻接表法-图的存储
  • C++23 放宽范围适配器以允许仅移动类型(P2494R2)
  • 【技海登峰】Kafka漫谈系列(十一)SpringBoot整合Kafka之消费者Consumer
  • Spring Boot三层架构设计模式
  • 在Java中调用Ant命令
  • WebRTC技术下的EasyRTC音视频实时通话SDK,助力车载通信打造安全高效的智能出行体验
  • 数据科学和机器学习的“看家兵器”——pandas模块 之二
  • 本地部署Firecrawl+Dify调用踩坑记录
  • MySQL--day2--基本的select语句
  • 什么是dom?作用是什么
  • Trae - 国人Cursor的免费平替产品
  • 自动化:批量文件重命名
  • Jsoup库和Apache HttpClient库有什么区别?
  • 学习!FastAPI
  • Linux 安装 Unreal Engine
  • 【第三十六周】LoRA 微调方法