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…...
nRF52与RFX2401C的PA+LNA优化方案:基于SoftDevice的高效驱动实现
1. 为什么需要PA和LNA优化方案 如果你正在用nRF52开发BLE设备,可能会遇到这样的困扰:明明参数配置没问题,但通信距离就是达不到预期。这时候就该请出我们今天的主角——RFX2401C这颗PA/LNA芯片了。我去年做智能牧场项⽬时就踩过这个坑&#…...
COMSOL 6.1 激光粉末床熔融气孔缺陷演化仿真:开启微观世界的探索之旅
COMSOL 6.1 激光粉末床熔融气孔缺陷演化仿真案例模型 本案例选用层流和流体传热模块,采用水平集法,考虑材料的热物性以及激光加工过程中的马兰戈尼效应、熔融金属表面张力、反冲压力、相变潜热、热对流和热辐射,建立含气孔缺陷的二维数值仿真…...
告别付费IP!手把手教你用ZCU102 PS端DP接口点亮显示器(附参数调试心得)
解锁ZCU102 PS端DisplayPort潜力:零成本实现高效显示输出的实战指南 在嵌入式视觉系统开发中,显示输出往往是项目落地的最后一道关卡。当我在多个Zynq UltraScale MPSoC项目中反复遭遇HDMI IP核的授权困扰和PL端实现的复杂性后,意外发现PS端集…...
【Python并发革命】:GIL解除后首个生产级无锁插件生态正式开放下载(限时72小时)
第一章:Python并发革命的里程碑意义 Python 并发模型的演进并非渐进式改良,而是一场深刻重塑编程范式的革命。从早期依赖线程与锁的阻塞式模型,到 asyncio 的异步 I/O 抽象、async/await 语法糖的引入,再到结构化并发(…...
MariaDB Docker容器权限配置问题分析与解决方案
MariaDB Docker容器权限配置问题分析与解决方案 1. 问题背景 在使用MariaDB Docker容器时,用户遇到了远程访问权限配置失效的问题。具体表现为: 手动创建的远程用户(如root%、****%、********%)在容器重启后无法远程连接权限表中显…...
网络基础知识整理(精简通用版)20260331-001篇
文章目录 网络基础知识整理(精简通用版) 一、网络基本概念 二、网络拓扑结构 三、OSI 七层模型(核心参考) 四、TCP/IP 模型(实际互联网标准) 五、IP 地址基础 六、传输层协议(TCP vs UDP) TCP(传输控制协议) UDP(用户数据报协议) 七、常见网络协议与端口 八、网络设…...
YOLOv8鹰眼目标检测问题解决:常见部署错误与使用技巧汇总
YOLOv8鹰眼目标检测问题解决:常见部署错误与使用技巧汇总 1. 引言:为什么选择YOLOv8鹰眼目标检测 YOLOv8作为当前计算机视觉领域最先进的目标检测模型之一,以其卓越的实时性和准确性赢得了广泛认可。鹰眼目标检测镜像基于Ultralytics官方YO…...
终极指南:如何用NSC_BUILDER一键搞定Switch游戏文件管理
终极指南:如何用NSC_BUILDER一键搞定Switch游戏文件管理 【免费下载链接】NSC_BUILDER Nintendo Switch Cleaner and Builder. A batchfile, python and html script based in hacbuild and Nuts python libraries. Designed initially to erase titlerights encryp…...
SAM 3在内容创作中的应用:快速分离图片视频主体,提升剪辑效率
SAM 3在内容创作中的应用:快速分离图片视频主体,提升剪辑效率 1. 引言:内容创作者的痛点与解决方案 在当今内容爆炸的时代,视频创作者和设计师们面临着一个共同的挑战:如何高效地从复杂背景中分离出主体对象。传统方…...
ncmdumpGUI:网易云音乐加密文件转换的完整解决方案
ncmdumpGUI:网易云音乐加密文件转换的完整解决方案 【免费下载链接】ncmdumpGUI C#版本网易云音乐ncm文件格式转换,Windows图形界面版本 项目地址: https://gitcode.com/gh_mirrors/nc/ncmdumpGUI 一、初识ncmdumpGUI:解密音乐文件的…...
