vue七牛云视频直传
完成后样式:
下面的代码是我自己项目里面用到的,一些判断看自己情况去掉,用的是element-ui组件
安装 uuid 库。你可以使用 npm 或 yarn 来完成安装。在终端中执行以下命令:
npm install uuid
html部分
<el-upload class="avatar-uploader el-upload--text"action="https://upload-cn-east-2.qiniup.com" :limit="3" controlsList="nodownload":show-file-list="false" :on-success="handleVideoSuccess":before-upload="beforeUploadVideo" :on-progress="uploadVideoProcess":http-request="sliderRequest"><div style="display: flex;"><div v-for="(item,index) in viduploaList" :key="index" style="position: relative;"><i class="el-icon-error" @click.stop="delvideo(index)"v-if="detailsObj.gvcinfo.examine_status!=21 && detailsObj.gvcinfo.examine_status!=23"style="color: #CF0000;font-size: 24px;position: absolute;top: 0;right: 0;"></i><video :id="'video'+index" @play="play(index)"v-if="viduploaList.length != 0 && videoFlag == false" :src="item"controlsList="nodownload" class="avatar" controls="controls">您的浏览器不支持视频播放</video></div><i v-if="viduploaList.length <3 && videoFlag == false && detailsObj.gvcinfo && detailsObj.gvcinfo.examine_status!=21 && detailsObj.gvcinfo.examine_status!=23"class="el-icon-plus avatar-uploader-icon"></i></div><el-progress v-if="videoFlag == true" type="circle" :percentage="videoUploadPercent"style="margin-top:30px;"></el-progress>
</el-upload>
引入的插件
import { v4 as uuidv4 } from 'uuid'//这个是uuid唯一值 引入命令npm install uuid
data里的值
viduploaList:[],
videoFlag:false
js代码
sliderRequest(upload) {const uuid = uuidv4() //这里是获取的唯一值uuid,这里也可以换成时间戳,看情况需要const formData = new FormData()formData.append('file', upload.file)formData.append('key', "七牛云目录名称" + uuid) // key 文件名处理,这样的话七牛会识别文件时什么类型//后端接口获取七牛云tokenupload_token().then(ress => {formData.append('token', ress.data.token)this.$nextTick(() => {this.$http.post('七牛云上传地址https', formData).then((response) => {if (response.status === 200) {const res = response.datathis.handleVideoSuccess(res);}})})})
},
// 验证视频格式看自己需求去设置
beforeUploadVideo(file) {if (['video/mp4','video/ogg','video/flv','video/avi','video/wmv','video/rmvb'].indexOf(file.type) === -1) {this.$message.error('请上传正确的视频格式')return false}
},
// 上传进度显示
uploadVideoProcess(event, file, fileList) {this.videoFlag = truethis.videoUploadPercent = Math.floor(event.percent)
},
// 获取上传图片地址
handleVideoSuccess(res, file) {this.videoFlag = falselet vidurl = localStorage.getItem('deploy') + '/' + res.key //这里获取的存储是七牛云视频链接+你上传时自定义文件名就是完整的视频地址this.viduploaList = this.viduploaList.concat([vidurl])
},
//删除上传视频
delvideo(index) {this.viduploaList.splice(index, 1)this.viduploaLista.splice(index, 1)
},
//播放当前视频,其他视频暂停
play(i) {this.viduploaList.forEach((item, index) => {if (i != index) {let idx = 'video' + indexlet vide = document.getElementById(idx)vide.pause();}})
},
css样式
.avatar-uploader-icon {border: 1px dashed #d9d9d9 !important;
}.avatar-uploader .el-upload {border: 1px dashed #d9d9d9 !important;border-radius: 6px !important;position: relative !important;overflow: hidden !important;
}.avatar-uploader .el-upload:hover {border: 1px dashed #d9d9d9 !important;border-color: #409eff;
}.avatar-uploader-icon {font-size: 28px;color: #8c939d;width: 300px;height: 178px;line-height: 178px;text-align: center;margin-left: 10px;
}
相关文章:

vue七牛云视频直传
完成后样式: 下面的代码是我自己项目里面用到的,一些判断看自己情况去掉,用的是element-ui组件 安装 uuid 库。你可以使用 npm 或 yarn 来完成安装。在终端中执行以下命令: npm install uuidhtml部分 <el-upload class&quo…...

云原生Kubernetes:K8S集群版本升级(v1.20.15 - v1.22.14)
目录 一、理论 1.K8S集群升级 2.集群概况 3.升级集群(v1.21.14) 4.验证集群(v1.21.14) 5.升级集群(v1.22.14) 6.验证集群 (v1.22.14) 二、实验 1.升级集群(v1.21.14) 2.验…...

VUE树结构实现
实现效果: 数据库表结构如下: 要求:需要有parentId,id。parentId就是父记录的id 表数据要求:一定不要让一条记录的parentid和id相同 前端代码: 注意:el-table标签里面需要加上属性,才可以有下拉箭头的样式 <el-table v-loading="listLoading" :data...

Node.js 正在逐渐被淘汰!Bun 1.0 正在改变 JavaScript 的游戏规则
在深入讨论之前,我们需要解释什么是 JavaScript 运行时以及为什么我们应该关心其速度。 想象一下,你用 JavaScript 写了一个故事,需要有人大声读出来。JavaScript 运行时就像是那个友好的叙述者,为你的故事赋予生命!它…...

[Machine Learning][Part 5]监督学习——逻辑回归
之前文章中提到监督学习的应用可分为两类:线性回归和逻辑回归。和线性回归不同,逻辑回归输出只有0和1。对于一个逻辑回归任务,可以先使用线性回归来预测y。然而我们希望逻辑回归预测模型输出的是0和1,为了达到这个目的,…...

whistle安卓手机抓包(图文详解)
1、安装node https://nodejs.org (官网下载对应的node,一般推荐长期稳定版本 LTS) 需要node的版本是大于 v0.10.0 查看自己本地node 版本号 node -v2、安装whistle npm i -g whistle3、开启whistle 补充说明: ● w2 stop:关闭…...
【经典排序算法 time: 2023-10-12】冒泡排序(层层优化改进)
原理 每次循环找出一个最大的元素(动态演示)第一版冒泡 public class Maopao1 {public static void main(String[] args) {long start System.currentTimeMillis();int[] arr2 {11, 23, 69, 99, 1, 3, 45, 67, 5, 234, 678, 999, 7, 123};int[] result…...

【图像去噪的扩散滤波】图像线性扩散滤波、边缘增强线性和非线性各向异性滤波(Matlab代码实现)
💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…...

4、在docker容器内的tomcat 中发布项目
1、查看本地是否有tomcat镜像,如果不存在则去下载 docker images 2、查看本地是否有tomcat容器,如存在跳过第3步 docker ps 3、创建tomcat容器 此容器用于复制tomcat的配置文件,配置文件复制后需删除此容器,如果已经存在跳过此步…...

数学建模——人工神经网络模型
一、人工神经网络简介 1、神经网络起源与应用 1943年心理学家McCulloch和数学家Pitts提出神经元生物数学模型(M-P模型),后来人工神经网络(Artifical Neural Network,ANN)是在生物神经网络(Biological Neural Network,BNN)基础上发展起来的&a…...
java合成多个pdf为一个pdf
pom文件 <dependency><groupId>com.lowagie</groupId><artifactId>itext</artifactId><version>2.1.7</version></dependency>主文件 import com.lowagie.text.Document; import com.lowagie.text.pdf.PdfCopy; import com.lo…...

“高级Vue状态管理 - Vuex的魅力与应用“
目录 引言1. Vuex的简介1.1 什么是Vuex?1.2 Vuex的核心概念 2. Vuex的值获取与改变(综合案例)3. Vuex的异步请求总结 引言 在现代Web开发中,前端应用变得越来越复杂。随着应用规模的扩大和数据流的复杂性增加,有效地管理应用的状态成为了一项…...
Vue整合
基础配置: 1.创建:cmd 中 输入 create vue vue_name 启动命令:npm run serve 2.当node_modules(依赖)丢失时通过 npm install 下载 【根据:package-lock.json下载】 3.下载路由 npm i vue-router3.5.2 -S main.js导入 // np…...

探秘PMP和六西格玛的不同:哪一个能为你的职业生涯加分?
今天,我们将带你深入了解一项相对冷门但价值不菲的证书——六西格玛黑带。 可能你曾听说过PMP,但相比之下,六西格玛黑带的资源分享似乎较少,考试内容却更为广泛深入。这里,让我为你详细解析这一考试,带你进…...
大数据学习(3)-hive分区表与分桶表
&&大数据学习&& 🔥系列专栏: 👑哲学语录: 承认自己的无知,乃是开启智慧的大门 💖如果觉得博主的文章还不错的话,请点赞👍收藏⭐️留言📝支持一下博>主哦&#x…...
JS 原生实现触底加载
创建一个容器来存储列表项。 监听滚动事件,当滚动接近底部时触发加载更多操作。 加载更多数据后,将新数据附加到容器中。 以下是一个简单的示例: <!DOCTYPE html> <html><head><style>#scroll-container {heigh…...

结构体,位段!
目录 1.什么是位段? 别急!在下面第二点我和大家介绍。 2.位段的内存怎么分配? 还有一种情况就是两种类型夹杂在一起的位段 3.位段的跨平台问题 4.位段能干嘛?(应用) 5.位段的注意事项 1.什么是位段&…...

当10年程序员是什么体验?存款几位数?
最近网上一个话题吸引了许多人的讨论,当10年程序员,是一种什么体验? 都说程序员的高收入和工作年限应该成正比,真的是这样吗?工作10年的程序员,工资应该是什么水平?不少网友纷纷“现身说法”..…...

ExoPlayer架构详解与源码分析(4)——整体架构
系列文章目录 ExoPlayer架构详解与源码分析(1)——前言 ExoPlayer架构详解与源码分析(2)——Player ExoPlayer架构详解与源码分析(3)——Timeline ExoPlayer架构详解与源码分析(4)—…...
rust文件读写
std::fs模块提供了结构体File,它表示一个文件。 一、打开文件 结构体File提供了open()函数 open()以只读模式打开文件,如果文件不存在,则会抛出一个错误。如果文件不可读,那么也会抛出一个错误。 范例 fn main() {let file s…...

龙虎榜——20250610
上证指数放量收阴线,个股多数下跌,盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型,指数短线有调整的需求,大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的:御银股份、雄帝科技 驱动…...

大话软工笔记—需求分析概述
需求分析,就是要对需求调研收集到的资料信息逐个地进行拆分、研究,从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要,后续设计的依据主要来自于需求分析的成果,包括: 项目的目的…...
rknn优化教程(二)
文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK,开始写第二篇的内容了。这篇博客主要能写一下: 如何给一些三方库按照xmake方式进行封装,供调用如何按…...

【OSG学习笔记】Day 16: 骨骼动画与蒙皮(osgAnimation)
骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术,它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton):由层级结构的骨头组成,类似于人体骨骼蒙皮 (Mesh Skinning):将模型网格顶点绑定到骨骼上,使骨骼移动…...
【Go语言基础【12】】指针:声明、取地址、解引用
文章目录 零、概述:指针 vs. 引用(类比其他语言)一、指针基础概念二、指针声明与初始化三、指针操作符1. &:取地址(拿到内存地址)2. *:解引用(拿到值) 四、空指针&am…...
纯 Java 项目(非 SpringBoot)集成 Mybatis-Plus 和 Mybatis-Plus-Join
纯 Java 项目(非 SpringBoot)集成 Mybatis-Plus 和 Mybatis-Plus-Join 1、依赖1.1、依赖版本1.2、pom.xml 2、代码2.1、SqlSession 构造器2.2、MybatisPlus代码生成器2.3、获取 config.yml 配置2.3.1、config.yml2.3.2、项目配置类 2.4、ftl 模板2.4.1、…...
Go语言多线程问题
打印零与奇偶数(leetcode 1116) 方法1:使用互斥锁和条件变量 package mainimport ("fmt""sync" )type ZeroEvenOdd struct {n intzeroMutex sync.MutexevenMutex sync.MutexoddMutex sync.Mutexcurrent int…...
前端中slice和splic的区别
1. slice slice 用于从数组中提取一部分元素,返回一个新的数组。 特点: 不修改原数组:slice 不会改变原数组,而是返回一个新的数组。提取数组的部分:slice 会根据指定的开始索引和结束索引提取数组的一部分。不包含…...

什么是VR全景技术
VR全景技术,全称为虚拟现实全景技术,是通过计算机图像模拟生成三维空间中的虚拟世界,使用户能够在该虚拟世界中进行全方位、无死角的观察和交互的技术。VR全景技术模拟人在真实空间中的视觉体验,结合图文、3D、音视频等多媒体元素…...
MFE(微前端) Module Federation:Webpack.config.js文件中每个属性的含义解释
以Module Federation 插件详为例,Webpack.config.js它可能的配置和含义如下: 前言 Module Federation 的Webpack.config.js核心配置包括: name filename(定义应用标识) remotes(引用远程模块࿰…...