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

实现视频分片上传 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 封装的操作,视频上传仅为使用实例。

相关文章:

  • Qt/C++编写音视频实时通话程序/画中画/设备热插拔/支持本地摄像头和桌面
  • FPGA:Lattice的FPGA产品线以及器件选型建议
  • MCP协议的核心机制和交互过程
  • 八股文--JVM(1)
  • 谷歌地图代理 | 使用 HTML 和矢量模式 API 更轻松地创建 Web 地图
  • SpringBoot常用注解详解
  • 码蹄集——圆包含
  • 芯片测试之X-ray测试
  • FC7300 GPT MCAL 配置引导
  • handsome主题美化及优化:10.1.0最新版 - 2
  • 分析主流编程语言中哪些为支持面向对象的语言
  • PHP 与 面向对象编程(OOP)
  • OM和SCADA的区别
  • Linux远程连接服务
  • Feign异步模式丢失上下文问题
  • 探索ISBN查询接口:为图书管理系统赋能
  • 三格电子上新了——IO-Link系列集线器
  • 1-10 目录树
  • 【控制波形如何COPY并无痛使用】
  • NocoBase 本周更新汇总:优化及缺陷修复
  • 女生“生理期请病假要脱裤子证明”?高校回应:视频经处理后有失真等问题
  • 科普|认识谵妄:它有哪些表现?患者怎样走出“迷雾”?
  • 侵害孩子者,必严惩不贷!3名性侵害未成年人罪犯今日执行死刑
  • “9+2”复式票,浦东购彩者拿下体彩大乐透1153万头奖
  • 江西3人拟提名为县(市、区)长候选人
  • 董军在第六届联合国维和部长级会议上作大会发言