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

Vue集成阿里云点播实现视频上传

news 来源：原创 2025/6/22 2:49:58

实现方式有多种，如下是我的实现方式：

一、下载点播插件，在 public 下的 index.html 中引入阿里云点播需要的 js 插件，js 文件最好放在 cdn 上,，这里以放在 public 文件夹下的 static 文件夹中为例：

<script src="/static/aliyun-upload-sdk-1.5.6/lib/es6-promise.min.js"></script>
<script src="/static/aliyun-upload-sdk-1.5.6/lib/aliyun-oss-sdk-6.17.1.min.js"></script>
<script src="/static/aliyun-upload-sdk-1.5.6/aliyun-upload-sdk-1.5.6.min.js"></script>

二、封装阿里云点播方法

import axios from 'axios'function createUplader(self) {// 声明AliyunUpload.Vod初始化回调const uploader = new window.AliyunUpload.Vod({userId: '122',partSize: 1048576,parallel: 5,retryCount: 3,retryDuration: 2,region: 'cn-shanghai',enableUploadProgress: true, // 是否上报上传日志到点播，默认为truelocalCheckpoint: true, // 此参数是禁用服务端缓存// 添加文件成功addFileSuccess: function (uploadInfo) {console.log('addFileSuccess：', uploadInfo)},// 初始化上传实例，开始上传onUploadstarted: function (uploadInfo) {console.log('onUploadstarted：', uploadInfo)// 获取上传凭证 sts tokenaxios.get('你的获取上传凭证的api url').then(({ data }) => {const accessKeyId = data.accessKeyIdconst accessKeySecret = data.accessKeySecretconst secretToken = data.securityTokenuploader.setSTSToken(uploadInfo, accessKeyId, accessKeySecret, secretToken) // 设置STS Token})},// 文件上传成功onUploadSucceed: function (uploadInfo) {console.log('onUploadSucceed：', uploadInfo, self)// 在这里通过回调拿到阿里云返回的上传成功的数据self.getFileData(uploadInfo)},// 文件上传失败onUploadFailed: function (uploadInfo) {console.log('onUploadFailed：', uploadInfo)self.$message.warning('文件上传失败')},// 取消文件上传onUploadCanceled: function (uploadInfo, code, message) {console.log('onUploadCanceled: ', uploadInfo, code, message)},// 文件上传进度，单位：字节onUploadProgress: function (uploadInfo, totalSize, loadedPercent) {console.log('onUploadProgress：', uploadInfo, totalSize, loadedPercent)},// 上传STS Token失效onUploadTokenExpired: function () {console.log('onUploadTokenExpired：上传文件超时')axios.get('你的获取上传凭证的api url').then(({ data }) => {const accessKeyId = data.accessKeyIdconst accessKeySecret = data.accessKeySecretconst secretToken = data.securityTokenuploader.resumeUploadWithSTSToken(accessKeyId, accessKeySecret, secretToken) // 更新STS Token重新上传})self.$message.success('上传文件超时，正在重新上传')},// 全部文件上传结束onUploadEnd: function (uploadInfo) {console.log(uploadInfo, 'onUploadEnd: uploaded all the files')self.$message.success('上传成功!')}})return uploader
}export default function videoChange(file) {this.uploader = createUplader(this)const paramData = {'Vod': {'Title': file.name, // 设置阿里云视频控制台Name为文件名}}// 添加上传文件this.uploader.addFile(file, null, null, null, JSON.stringify(paramData))this.uploader.startUpload() // 开始上传
}

三、页面中使用

<template><a-upload:customRequest="handleChange":file-list="fileList"><a-button> <a-icon type="upload" /> 上传 </a-button></a-upload>
</template><script>
import videoChange from '@/utils/upload-file-to-sts.js'
export default {data() {return {fileList: [], // 已经上传的文件列表}},mounted() {},methods: {getFileData(res) {this.fileList = this.fileList.concat(res)this.$emit('input', this.fileList)},/** 自定义上传事件 */async handleChange(info) {console.log(info)videoChange.call(this, info.file)}}
}
</script>

Vue集成阿里云点播实现视频上传

实现方式有多种，如下是我的实现方式： 一、下载点播插件，在 public 下的 index.html 中引入阿里云点播需要的 js 插件，js 文件最好放在 cdn 上,，这里以放在 public 文件夹下的 static 文件夹中为例： <s…...

编程日记 2025/6/22 2:49:58

ByteByteGo-Forward/Reverse Proxy正/反向代理

原文链接 EP137: Proxy Vs Reverse proxy - ByteByteGo Newsletter 参考链接 Forward proxy vs. reverse proxy: Whats the difference? | TheServerSide 正向代理 （Forward Proxy） 位置：用户设备和互联网之间用途：保护客…...

编程日记 2025/6/22 0:54:19

[论文阅读] |智能体长期记忆与反思

写在前面：10月份的时候，联发科天玑9400发布，搭载这款旗舰 5G 智能体 AI 芯片的荣耀MagicOS9.0实现了一句话让手机自动操作美团点咖啡。很快商场实体店里便能看到很多品牌手机已经升级为智能体语音助手。下一步，这些智能体或许便能…...

编程日记 2025/6/19 22:10:09

Elasticsearch Kibana （windows版本）安装和启动

目录 1.安装 2.启动 elasticsearch 3.启动 kibana 1.安装 elasticsearch下载，官网链接： Download Elasticsearch | Elastichttps://www.elastic.co/downloads/elasticsearch kibana下载，官网链接： Download Kibana Free | G…...

编程日记 2025/6/22 1:11:03

CSS系列（9）-- Transform 变换详解

前端技术探索系列：CSS Transform 变换详解 🔄 致读者：探索 CSS 变换的魔力 👋 前端开发者们， 今天我们将深入探讨 CSS Transform，学习如何创建引人注目的 2D 和 3D 变换效果。 2D 变换基础 &#x1f68…...

编程日记 2025/6/21 17:45:49

bs4基本运用

1. bs4基本使用 1.1. 简介 bs4的全称为 BeautifulSoup。和lxml一样，是一个html的解析器，主要功能也是解析数据和提取数据。本模块作为了解模块，实际开发中很少用这个模块去解析数据，大家可能会想为什么这个模块会逐渐被淘汰&…...

编程日记 2025/6/22 1:54:39

基础环境 apache-skywalking-apm-9.6.0.tar.gz apache-skywalking-java-agent-9.1.0.tgz elasticsearch 7.14.1 采用dockers搭建或者手动部署 kibana 可视化应用微服务版 consumer.jar eureka.jar 注册中心 provider.jar skywalking 地址 https://skywalkin…...

编程日记 2025/6/4 8:08:30

C# 和 go 关于can通信得整理

在C#中开发CAN（Controller Area Network）通信接口时，确实有一些现成的NuGet包可以简化你的开发工作。这些库通常提供了与CAN硬件接口通信所需的基本功能，如发送和接收CAN消息。下面是一些常用的NuGet包： PCANBasic.NET…...

编程日记 2025/6/22 2:31:32

Unity类银河战士恶魔城学习总结（P179 Enemy Archer 弓箭手）

教程源地址：https://www.udemy.com/course/2d-rpg-alexdev/ 本章节实现了敌人弓箭手的制作 Enemy_Archer.cs 核心功能状态机管理敌人的行为定义了多个状态对象（如 idleState、moveState、attackState 等），通过状态机管理敌人的…...

编程日记 2025/6/22 1:42:18

一、LRU缓存

LRU缓存 1.LRU缓存介绍2.LRU缓存实现3.LRU缓存总结3.1 LRU 缓存的应用3.2 LRU 缓存的优缺点 1.LRU缓存介绍 LRU是Least Recently Used 的缩写，意为“最近最少使用”。它是一种常见的缓存淘汰策略，用于在缓存容量有限时，决定哪些数据需要被删…...

编程日记 2025/6/22 0:52:02

基于python绘制数据表（上）

利用python绘制各种数据图表绘制柱形图-源码 from openpyxl import Workbook from openpyxl.chart import BarChart, Reference# 创建工作薄 wb Workbook(write_onlyTrue) # 创建工作表 ws wb.create_sheet(月收入)# 准备数据 rows [(月份, 销售额),(1, 23),(2, 43),(3, …...

编程日记 2025/6/22 1:05:58

Python Segmentation fault错误定位办法

1. 说明 Python3执行某一个程序时，报Segmentation fault (core dumped)错，但没有告知到底哪里出错，无法查问题，这时就需要一个库faulthandler来帮助分析。 2. 安装faulthandler faulthandler在Python3.3之后成为标准库&#xf…...

编程日记 2025/6/22 2:41:55

快速在远程服务器执行命令、批量在多个服务器执行命令（基于sshpass的自定义脚本fastsh）

在日常服务器操作中，很多时候我们需要同时操作多个服务器。特别对于那些每个服务器都需要操作相同命令的场景，不断的切换命令会话窗口会比较麻烦。基于此，编写了本文中的 fastsh 脚本用于轻度解决这种问题，提高一定的便利性。使…...

编程日记 2025/6/22 2:31:31

Java基于SpringBoot的企业OA管理系统，附源码

博主介绍：✌Java老徐、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专栏推荐订阅👇&…...

编程日记 2025/6/22 0:45:06

SSM 垃圾分类系统——环保领域的创新引擎

第1章概述 1.1 研究背景随着现代网络技术发展，对于垃圾分类系统现在正处于网络发展的阶段，所以对它的要求也是比较严格的，要从这个系统的功能和用户实际需求来进行对系统制定开发的发展方式，依靠网络技术的的快速发展和现代通讯…...

编程日记 2025/6/20 21:03:03

websocker的java集成过程

第一步：引入依赖包 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId> </dependency> 第二步设置配置类： // 需要注入Bean的话必须声明为配置类 Co…...

编程日记 2025/6/21 1:32:26

如何对小型固定翼无人机进行最优的路径跟随控制？

控制架构文章继续采用的是 ULTRA-Extra无人机，相关参数如下： 这里用于guidance law的无人机运动学模型为： { x ˙ p V a cos ⁡ γ cos ⁡ χ V w cos ⁡ γ w cos ⁡ χ w y ˙ p V a cos ⁡ γ sin ⁡ χ V w cos ⁡ γ w sin ⁡ χ…...

编程日记 2025/6/21 1:41:01

03、对象的内存布局以及分配方式

在通过前面的文章了解到当一个程序启动的时候，会把一个java文件通过编译成class文件，然后把class字节码加载到JVM内存中，并初始化各种变量和对象实例，同时建立起具体的内存模型进行线程间的数据交换，在这之间对象的实例…...

编程日记 2025/6/20 8:34:02

「Mac玩转仓颉内测版50」小学奥数篇13 - 动态规划入门

本篇将通过 Python 和 Cangjie 双语介绍动态规划的基本概念，并解决一个经典问题：斐波那契数列。学生将学习如何使用动态规划优化递归计算，并掌握编程中的重要算法思想。关键词小学奥数Python Cangjie动态规划斐波那契数列一、题目描述 …...

编程日记 2025/6/4 0:09:59

ADB在浏览器中：ya-webadb项目安装与配置完全指南

ADB在浏览器中：ya-webadb项目安装与配置完全指南 ya-webadb ADB in your browser [这里是图片001] 项目地址: https://gitcode.com/gh_mirrors/ya/ya-webadb 项目基础介绍与编程语言 ya-webadb 是一个由 Yume-chan 开发的开源项目，它实现了ADB&#x…...

编程日记 2025/5/30 15:51:58

通过ros2启动gazebo

ros2_integration3.使用gazebo加载URDF 在老版本中，我们使用 gazebo --verbose -s libgazebo_ros_init.so -s libgazebo_ros_factory.so来启动gazebo和ros2与gazebo的桥。但在新版本中，libazebo_ros_init.so和libazebo_ros_factory.so不再被支持你…...

编程日记 2025/6/21 1:38:56

WPF 消息循环（二）

们已经知道，win32/MFC/WinForm/WPF 都依靠消息循环驱动，让程序跑起来。这里就介绍 WPF 中是如何使用消息循环来驱动程序的。 1. 背景只听说过 Dispatcher ，哪里来的消息循环？ WPF 启动运行堆栈： > WpfApp1.…...

编程日记 2025/6/2 10:39:54

基于stm32的红外测温系统设计（论文+源码）

1总体方案设计本课题为基于STM32的红外测温系统设计，在此将系统架构设计如图3.1所示， 整个系统包括STM32F103单片机，红外测温模块MLX90614，显示模块OLED12864，蜂鸣器以及按键等构成，在功能上，…...

编程日记 2025/6/2 9:43:09

分布式 Paxos算法总结

前言相关系列《分布式 & 目录》《分布式 & Paxos算法 & 总结》《分布式 & Paxos算法 & 问题》参考文献《图解超难理解的 Paxos 算法（含伪代码）》《【超详细】分布式一致性协议 - Paxos》 Basic-Paxos 基础帕克索斯算法…...

编程日记 2025/5/31 5:28:36

ubuntu 使用 Times New Roman 字体在 Matplotlib 中绘图并调整字体大小

ubuntu 使用 Times New Roman 字体在 Matplotlib 中绘图并调整字体大小文章目录 ubuntu 使用 Times New Roman 字体在 Matplotlib 中绘图并调整字体大小1. 安装 Times New Roman 字体验证字体是否安装成功 2. 在 Matplotlib 中加载 Times New Roman 字体3. 在 Matplotlib 中使…...

编程日记 2025/6/21 1:28:34

[网络] UDP协议16位校验和

16位校验和是udp报头中的一个字段,绝大多数的教材和网课都会忽略这个字段,不去细究,我闲的蛋疼问了问ai,得到了一个答案,故作此文,以证明我爱学习之心惊天地泣鬼神(狗头 ai的回答仅从作用来说,它会根据整个应用层报文进行运算,生成一个准确的数字,这个数字不能保证唯一性,但根…...

编程日记 2025/6/2 10:20:11

【总结·反思·汇报·思考02】裸辞后，我的一些感想和感悟。

Hello，大家好！ 首先，我需要向大家道个歉，对不起！因为最近发生了一些事情，博客文章一直没有更新。（90度鞠躬道歉） 那么，最近到底发生了什么呢？相信大家已经从…...

编程日记 2025/6/2 17:45:44

【前端开发】HTML+CSS网页，可以拿来当作业（免费开源）

HTML代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content_lizhongyu"widthdevice-width, initial-scale1.0"><title>小兔鲜儿-新鲜、惠民、快捷<…...

编程日记 2025/6/22 1:36:21

java 导出word锁定且部分内容解锁可编辑

使用 Apache POI 创建带编辑限制的 Word 文档在日常工作中，我们可能需要生成一些带有编辑限制的 Word 文档，例如某些段落只能被查看，而其他段落可以自由编辑。本文介绍如何使用 Apache POI 创建这样的文档，并通过代码实现相应的…...

编程日记 2025/6/21 9:17:18

Scala的隐式类

package hfd //隐式类 //任务：给之前的BaseUser添加新的功能，但是不要直接去改代码 //思路：把BaseUser通过隐式转换，改成一个新类型，而这个新类型中有这新的方法 //implicit class一个隐式转换函数类 //作用&#xff1…...

编程日记 2025/5/30 18:25:22

Jenkins流水线初体验（六）

DevOps之安装和配置 Jenkins (一) DevOps 之 CI/CD入门操作 (二) Sonar Qube介绍和安装（三） Harbor镜像仓库介绍&安装（四） Jenkins容器使用宿主机Docker（五） Jenkins流水线初体验（六）一、Jenkins流水线任务介绍之前采用Jenkins的自由风格构建的项目，每个步骤…...

编程日记 2025/6/3 17:23:24

RK3568(二)——字符设备驱动开发

最基础的字符设备驱动开始，重点学习 Linux 下字符设备驱动开发框架。驱动框架 Linux 应用程序对驱动程序的调用： 在 Linux 中一切皆为文件，驱动加载成功以后会在“/dev”目录下生成一个相应的文件，应用程序通过对这个名为“/de…...

编程日记 2025/6/2 13:22:39

apk反编译修改教程系列-----超简单修改apk中名称包名布局文本以及其中的文字选项手机设置中apk对应修改演示【三十三】

💝💝💝在反编译apk中，每个初学者可能最感兴趣入门的就是修改包名去更新以及其中选项文本的修改。这样循序渐进来激发学习的兴趣。了解一些apk中常见的修改方法。对于修改手机rom中的系统类等等的apk原理都是一样的。这篇是应粉丝需要的修改apk基础教程. 通过博文了解…...

编程日记 2025/6/20 11:09:02

Git-分布式版本控制工具

目录 1. 概述 1. 1集中式版本控制工具 1.2分布式版本控制工具 2.Git 2.1 git 工作流程 1. 概述在开发活动中，我们经常会遇到以下几个场景：备份、代码回滚、协同开发、追溯问题代码编写人和编写时间（追责）等。备份的话是为了…...

编程日记 2025/6/4 16:00:02

计算机进制的介绍

一.进制介绍对于整数，有四种表示方式: 1）二进制:0,1，满2进1。在golang中，不能直接使用二进制来表示一个整数，它沿用了c的特点。参考:Go语言标准库文档中文版 | Go语言中文网 | Golang中文社区 | Golang中国 //赋值…...

编程日记 2025/6/3 10:17:16

【FreeMarker】实现生成Controller根据模板勾选的内容查询

需求：根据模板列表勾选的字段查询列表数据 FreeMarker代码： /*** 分页列表查询** param ${entityName?uncap_first}* param pageNo* param pageSize* param req* return*///AutoLog(value "${tableVo.ftlDescription}-分页列表查询")ApiOp…...

编程日记 2025/6/21 11:27:31

Redis 基础

一. redis 概述 Redis 是一个开源的、高性能的键值对（key-value）存储数据库，通常用作缓存、消息队列或持久化的数据存储。它的全称是 REmote DIctionary Server，最初由 Salvatore Sanfilippo 开发并于2009年发布。 redis 关键特点…...

编程日记 2025/6/21 20:04:53

【Linux】深入理解GCC/G++编译流程及库文件管理

目录 1.背景知识 2.gcc/g如何完成编译 (1) 预处理（进行宏替换） (2) 编译（生成汇编） (3) 汇编（生成机器可识别代码） (4) 链接（生成可执行文件或库文件） (5) 总结 (6) 函数库 …...

编程日记 2025/5/31 2:04:12

分布式窗口算法总结

前言相关系列《分布式 & 目录》《分布式 & 窗口算法 & 总结》《分布式 & 窗口算法 & 问题》参考文献《【算法】令牌桶算法》固定窗口算法简介固定窗口算法是最简单的流量控制算法。固定窗口算法的核心原理是将系统的生命周期划分为一个个…...

编程日记 2025/6/20 1:51:01

多分类交叉熵与稀疏分类交叉熵

总结：标签为 One-hot 编码的多分类问题，用分类交叉熵对于标签为整数的多分类问题，用稀疏分类交叉熵稀疏分类交叉熵内部会将整数标签转换为 One-hot 编码，而如果标签已经是 One-hot 编码的形式，再使用稀疏分类交叉熵就会多此一举。算例假设我们有三个类别：A、B 和 C。…...

编程日记 2025/6/2 3:05:18

ElasticSearch 简介

一、什么是 ElastcSearch？ ElasticSearch 是基于 Lucene 的 Restful 的分布式实时全文搜索引擎。 1.1 ElasticSearh 的基本术语概念 index 索引索引类似与 mysql 中的数据库，ES 中的索引是存储数据的地方，包含了一堆有相似结构的文档数据…...

编程日记 2025/6/1 19:57:39

一些浅显易懂的IP小定义

IP归属地（也叫IP地址，IP属地） 互联网协议地址，每个设备上的唯一的网络身份证明。用于确保网络数据能够精准传送到你的设备上。基于IP数据云全球IP归属地解析，示例Python代码 curl -X POST https://route.showapi.co…...

编程日记 2025/5/30 7:32:40

#渗透测试#漏洞挖掘#红蓝攻防#护网#sql注入介绍02-基于错误消息的SQL注入（Error-Based SQL Injection）

免责声明本教程仅为合法的教学目的而准备，严禁用于任何形式的违法犯罪活动及其他商业行为，在使用本教程前，您应确保该行为符合当地的法律法规，继续阅读即表示您需自行承担所有操作的后果，如有异议，请立即停…...

编程日记 2025/6/20 13:27:16

C# 探险之旅：第三十六节 - 类型class之密封类Sealed Classes

嗨，探险家们！欢迎再次搭乘我们的C#魔法列车，今天我们要去一个神秘又有点“傲娇”的地方——密封类（Sealed Classes）领地。系好安全带，咱们要深入“密封”的奇妙世界啦！ 什么是密封类&#xff1…...

编程日记 2025/6/19 22:11:51

Error in v-on handler: “TypeError: handler.apply is not a function“

报错截图原因原来是我在.vue单文件中 data里面的属性和methods里面的方法重名了解决方面重新命名了一下和data里面的属性值不一样就可以了。...

编程日记 2025/5/18 2:30:23

《拉依达的嵌入式\驱动面试宝典》—C/CPP基础篇(五)

《拉依达的嵌入式\驱动面试宝典》—C/CPP基础篇(五) 你好，我是拉依达。感谢所有阅读关注我的同学支持，目前博客累计阅读 27w，关注1.5w人。其中博客《最全Linux驱动开发全流程详细解析（持续更新）-CSDN博客》已经是 Linux驱动相关内容搜索的推荐首位，感谢大家支持。《拉…...

编程日记 2025/6/21 23:47:13

《B+树的原理与实践：探索高效数据存储与检索》

一、B树的基本原理 B树的定义 B树是一种自平衡的树结构，它是由B树衍生而来的。B树的特点是所有的数据记录都存储在叶子节点上，而叶子节点本身按照关键字的大小顺序相连，形成一个有序链表。 B树的结构 B树的结构包括以下几个部分&#xff1…...

编程日记 2025/6/3 12:52:42

Android无障碍服务监听实现自动点击按钮

原理： 通过监听窗口改变事件，监听目标应用，通过视图ID（或文本、或描述、或其他如坐标之类的）找到目标视图，使用无障碍动作点击方法点击它无障碍服务实现： 1、写一个自己的无障碍服务继承Acc…...

编程日记 2025/6/19 23:57:29

Jenkins 启动程序退出后被杀死问题

参考 Spawning Processes From Build (jenkins.io) 解决jenkins脚本启动项目后进程被杀死_jenkins杀进程-CSDN博客...

编程日记 2025/5/19 12:58:31

前端样式练手：阴阳图+时钟的组合

开篇今天的小作品是突然脑子灵光一闪写出来的，代码不多，就不过多赘述了。代码实现 <template><div class"clock-container"><!-- <div class"bagua"><divv-for"(trigram, ind…...

编程日记 2025/5/31 16:53:08

相关文章：