实现视频分片上传 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.mzph.cn/bicheng/81483.shtml

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

相关文章

动态规划(3)学习方法论:构建思维模型

引言 动态规划是算法领域中一个强大而优雅的解题方法,但对于许多学习者来说,它也是最难以掌握的算法范式之一。与贪心算法或分治法等直观的算法相比,动态规划往往需要更抽象的思维和更系统的学习方法。在前两篇文章中,我们介绍了动态规划的基础概念、原理以及问题建模与状…

elementplus el-tree 二次封装支持配置删除后展示展开或折叠编辑复选框懒加载功能

本文介绍了基于 ElementPlus 的 el-tree 组件进行二次封装的 TreeView 组件,使用 Vue3 和 JavaScript 实现。TreeView 组件通过 props 接收树形数据、配置项等,支持懒加载、节点展开/收起、节点点击、删除、编辑等操作。组件内部通过 ref 管理树实例&…

2025年渗透测试面试题总结-安恒[实习]安全工程师(题目+回答)

网络安全领域各种资源,学习文档,以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具,欢迎关注。 目录 安恒[实习]安全工程师 一面 1. 自我介绍 2. 前两段实习做了些什么 3. 中等难度的算法题 4. Java的C…

网络编程中的直接内存与零拷贝

本篇文章会介绍 JDK 与 Linux 网络编程中的直接内存与零拷贝的相关知识,最后还会介绍一下 Linux 系统与 JDK 对网络通信的实现。 1、直接内存 所有的网络通信和应用程序中(任何语言),每个 TCP Socket 的内核中都有一个发送缓冲区…

TransmittableThreadLocal使用场景

🚀 为什么要用 TransmittableThreadLocal?一文读懂线程上下文传递问题 在 Java Web 开发中,我们经常用 ThreadLocal 来保存每个请求的用户信息,例如 userId。但当我们使用线程池或异步方法(如 Async)时&am…

Milvus(24):全文搜索、文本匹配

1 全文搜索 全文搜索是一种在文本数据集中检索包含特定术语或短语的文档,然后根据相关性对结果进行排序的功能。该功能克服了语义搜索的局限性(语义搜索可能会忽略精确的术语),确保您获得最准确且与上下文最相关的结果。此外&…

2000 元以下罕见的真三色光源投影仪:雷克赛恩Cyber Pro1重新定义入门级投影体验

当性价比遇上技术瓶颈 在 2000元以下的1080P投影仪,单LCD 技术长期主导。而三色光源的DLP和3LCD真1080P都在4000元以上。 单LCD投影为纯白光光源,依赖CF滤光膜导致光效低下,普遍存在" 色彩失真 " 等问题。数据显示,该价…

Maven 下载安装与配置教程

## 1. Maven 简介 Maven 是一个项目管理和构建自动化工具,主要用于 Java 项目。Maven 可以帮助开发者管理项目的构建、报告和文档,简化项目依赖管理。 ## 2. 下载 Maven 1. 访问 Maven 官方网站 [https://maven.apache.org/download.cgi](https://maven.…

C# 深入理解类(从类的外部访问静态成员)

从类的外部访问静态成员 在前一章中,我们看到使用点运算符可以从类的外部访问public实例成员。点运算符由实 例名、点和成员名组成。 就像实例成员,静态成员也可以使用点运算符从类的外部访问。但因为没有实例,所以最常 用的访问静态成员的方…

Java在微服务架构中的最佳实践:从设计到部署

在2025年的云计算和分布式系统时代,微服务架构已成为构建高可扩展、高可用系统的标准方法,广泛应用于电商、金融和物联网等领域。Java凭借其成熟的生态系统、强大的并发支持和跨平台能力,是微服务开发的首选语言。例如,我们的订单…

文件读取漏洞路径与防御总结

文件读取漏洞路径与防御总结 文件读取漏洞允许攻击者通过路径遍历等手段访问未授权的文件。以下是Linux和Windows系统中常见敏感路径的归纳及防御建议: Linux 系统常见敏感路径 系统关键文件: /etc/passwd:用户账户信息(可被用来…

react-router基本写法

1. 创建项目并安装所有依赖 npx create-react-app react-router-pro npm i 2. 安装所有的 react router 包 npm i react-router-dom 3. 启动项目 npm run start router/index.js // 创建路由实例 绑定path elementimport Layout from "/pages/Layout"; import…

uni-app 开发HarmonyOS的鸿蒙影视项目分享:从实战案例到开源后台

最近,HBuilderX 新版本发布,带来了令人兴奋的消息——uni-app 现在支持 Harmony Next 平台的 App 开发。这对于开发者来说无疑是一个巨大的福音,意味着使用熟悉的 Vue 3 语法和开发框架,就可以为鸿蒙生态贡献自己的力量。 前言 作…

纯css实现蜂窝效果

<!DOCTYPE html><html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>蜂窝效果</title><style>body {margin: 0…

JAVA EE_HTTP

为什么意气风发的少年&#xff0c;总是听不进去别人的劝解。 ​​​​​​​ ​​​​​​​ ----------陳長生. ❀主页&#xff1a;陳長生.-CSDN博客❀ &#x1f4d5;上一篇&#xff1a;JAVA EE_网络原理_数据链路层-CSDN博客 1.HTTP 1.1.HTTP是什么 H…

存储扇区分配表:NAND Flash与SD NAND(贴片式SD卡)的架构差异

NAND Flash 和 SD 卡&#xff08;SD NAND&#xff09;的存储扇区分配表在原理上有相似之处&#xff0c;但由于二者的结构和应用场景不同&#xff0c;也存在一些差异。 相同点&#xff1a; 基本功能&#xff1a;NAND Flash 和 SD 卡&#xff08;SD NAND&#xff09;的存储扇区分…

界面控件DevExpress WinForms中文教程:Banded Grid View - API

DevExpress WinForms拥有180组件和UI库&#xff0c;能为Windows Forms平台创建具有影响力的业务解决方案。DevExpress WinForms能完美构建流畅、美观且易于使用的应用程序&#xff0c;无论是Office风格的界面&#xff0c;还是分析处理大批量的业务数据&#xff0c;它都能轻松胜…

4G物联网模块实现废气处理全流程数据可视化监控配置

一、项目背景 随着工业化进程的加速&#xff0c;工业废气的排放对环境造成了严重影响&#xff0c;废气处理厂应运而生。然而&#xff0c;废气处理厂中的设备众多且分散&#xff0c;传统的人工巡检和数据记录方式效率低下&#xff0c;难以及时发现问题。为了实现对废气处理设备…

Kubernetes控制平面组件:Kubelet详解(四):gRPC 与 CRI gRPC实现

云原生学习路线导航页&#xff08;持续更新中&#xff09; kubernetes学习系列快捷链接 Kubernetes架构原则和对象设计&#xff08;一&#xff09;Kubernetes架构原则和对象设计&#xff08;二&#xff09;Kubernetes架构原则和对象设计&#xff08;三&#xff09;Kubernetes控…

【数据结构】线性表--队列

【数据结构】线性表--队列 一.什么是队列二.队列的实现1.队列结构定义&#xff1a;2.队列初始化函数&#xff1a;3.队列销毁函数&#xff1a;4.入队列函数&#xff08;尾插&#xff09;&#xff1a;5.出队列函数&#xff08;头删&#xff09;&#xff1a;6.取队头元素&#xff…