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;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/102376.shtml

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

相关文章

【python】time

文章目录 【calendar】是否闰年星期英文缩写今天星期几打印日历 【datetime】今天星期几 【time】当前时间 【pandas】当前时间文件修改的时间 【日历】 【calendar】 是否闰年 import calendar print(calendar.isleap(2000))out True星期英文缩写 print(calendar.weekhead…

TCP/IP(十三)滑动窗口

一 滑动窗口 通信双方要读懂对方的反馈信息,并进行调整 TCP滑动窗口原理终于清楚了 TCP Window Full 和 TCP Zero Window "特殊的场景" 1、TCP Window Full 是站在发送端角度说的特点&#xff1a; 表示发送端不能再发数据给对方,除非发送的数据包得到ACK响应2、…

SSM - Springboot - MyBatis-Plus 全栈体系(二十四)

第五章 SSM 二、SSM 整合配置实战 1. 依赖整合添加 1.1 数据库准备 依然沿用 mybatis 数据库测试脚本&#xff01; CREATE DATABASE mybatis-example;USE mybatis-example;CREATE TABLE t_emp(emp_id INT AUTO_INCREMENT,emp_name CHAR(100),emp_salary DOUBLE(10,5),PRIM…

谷歌云 | 零售行业的生成式 AI:如何跟上步伐并取得领先

【Cloud Ace 是 Google Cloud 全球战略合作伙伴&#xff0c;在亚太地区、欧洲、南北美洲和非洲拥有二十多个办公室。Cloud Ace 在谷歌专业领域认证及专业知识目前排名全球第一位&#xff0c;并连续多次获得 Google Cloud 各类奖项。作为谷歌云托管服务商&#xff0c;我们提供谷…

基于 ACK Fluid 的混合云优化数据访问(四):将第三方存储目录挂载到 Kubernetes,提升效率和标准化

作者&#xff1a;车漾 前文回顾&#xff1a; 本系列将介绍如何基于 ACK Fluid 支持和优化混合云的数据访问场景&#xff0c;相关文章请参考&#xff1a; -基于 ACK Fluid 的混合云优化数据访问&#xff08;一&#xff09;&#xff1a;场景与架构 -基于 ACK Fluid 的混合云优…

JavaScript的懒加载处理

&#x1f618;博主&#xff1a;小猫娃来啦 &#x1f618;文章核心&#xff1a;JavaScript的懒加载处理 文章目录 什么是懒加载实现懒加载的方式js四步法设置占位图监听滚动事件加载图片触发加载函数 什么是懒加载 懒加载&#xff08;Lazy Loading&#xff09;是一种优化技术&a…

【opencv】windows10下opencv4.8.0-cuda C++版本源码编译教程

【opencv】windows10下opencv4.8.0-cuda C版本源码编译教程 提示:博主取舍了很多大佬的博文并亲测有效,分享笔记邀大家共同学习讨论 文章目录 【opencv】windows10下opencv4.8.0-cuda C版本源码编译教程前言准备工具cuda/cudnncmakeopencv4.8.0opencv_contrib CMake编译VS2019编…

文心一言 VS 讯飞星火 VS chatgpt (111)-- 算法导论10.2 2题

二、用go语言&#xff0c;用一个单链表 L实现一个栈。要求操作 PUSH和 POP 的运行时间仍为 O(1)。 文心一言&#xff1a; 在 Go 语言中&#xff0c;我们可以用结构体来实现一个单链表&#xff0c;然后再用栈的相关操作。 以下是一个可能的实现方式&#xff1a; package mai…

碰撞检测算法——分离轴算法在Unity中实现(二)

一、介绍 分离轴算法&#xff08;简称SAT&#xff09;通常用于检查两个简单多边形&#xff08;凸边形&#xff09;之间或多边形与圆之间的碰撞。本质上&#xff0c;如果您能够绘制一条线来分隔两个多边形&#xff0c;则它们不会发生碰撞&#xff0c;如果找不到一条线来分割两个…

力扣:129. 求根节点到叶节点数字之和(Python3)

题目&#xff1a; 给你一个二叉树的根节点 root &#xff0c;树中每个节点都存放有一个 0 到 9 之间的数字。 每条从根节点到叶节点的路径都代表一个数字&#xff1a; 例如&#xff0c;从根节点到叶节点的路径 1 -> 2 -> 3 表示数字 123 。 计算从根节点到叶节点生成的 所…

STM32CubeMX使用

一、新建工程 首先&#xff0c;打开STM32CubeMX&#xff0c;第一次使用的朋友可以点击右侧的CHECK FOR UPDATE和INSTALL/REMOVE检查一下软件更新并且找到对应芯片的固件库然后下载&#xff0c;软件和固件库都推荐是使用最新版的&#xff0c;这里不多介绍。 完毕之后点击File-&…

信创之国产浪潮电脑+统信UOS操作系统体验4:visual studio code中怎么显示中文

☞ ░ 前往老猿Python博客 ░ https://blog.csdn.net/LaoYuanPython 一、引言 今天在vscode中打开以前的一段C代码&#xff0c;其中的中文显示为乱码&#xff0c;如图所示&#xff1a; 而在统信文本编辑器打开是正常的&#xff0c;打开所有菜单&#xff0c;没有找到相关配置…

《进化优化》第3章 遗传算法

文章目录 3.1 遗传学的历史3.2 遗传学3.3 遗传学的历史3.4 一个简单的二进制遗传算法3.4.1 用于机器人设计的遗传算法3.4.2 选择与交叉3.4.3 变异3.4.5 遗传算法参数调试 3.5 简单的连续遗传算法 遗传算法模仿自然选择来解决优化问题。 为研究遗传算法&#xff0c;得遵守自然选…

进来了解实现官网搜索引擎的三种方法

做网站的目的是对自己的品牌进行推广&#xff0c;让越来越多的人知道自己的产品&#xff0c;但是如果只是做了一个网站放着&#xff0c;然后等着生意找上门来那是不可能的。在当今数字时代&#xff0c;实现官网搜索引擎对于提升用户体验和推动整体性能至关重要。搜索引擎可以帮…

深入理解强化学习——标准强化学习和深度强化学习

分类目录&#xff1a;《深入理解强化学习》总目录 强化学习的历史 早期的强化学习&#xff0c;我们称其为标准强化学习。最近业界把强化学习与深度学习结合起来&#xff0c;就形成了深度强化学习&#xff08;Deep ReinforcemetLearning&#xff09;。因此&#xff0c;深度强化…

试图带你一文搞懂transformer注意力机制(Self-Attention)的本质

这篇文章主要想搞懂以下几个问题&#xff1a; 1、什么是自注意力&#xff08;Self-Attention&#xff09; 2、Q,K,V是什么 好了废话不多说&#xff0c;直接进入正题 Q,K,V分别代表query&#xff0c;key和value&#xff0c;这很容易让人联想到python的字典数据结构&#xff…

Ghidra101再入门(上?)-Ghidra架构介绍

Ghidra101再入门(上&#xff1f;)-Ghidra架构介绍 最近有群友问我&#xff0c;说&#xff1a;“用了很多年的IDA&#xff0c;最近想看看Ghidra&#xff0c;这应该怎么进行入门&#xff1f;“这可难到我了。。 我发现&#xff0c;市面上虽然介绍Ghidra怎么用的文章和书籍很多&…

C++ 使用Windows的API CreateDirectory 创建多层级文件夹

简介 使用Windows的API创建多层级文件夹 效果 代码 #include <windows.h> #include <direct.h> #include <iostream> #include <string> #include <sstream> #include <vector> //创建多层级文件夹 bool CreateDir(const std:…

【算法-动态规划】0-1 背包问题

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kuan 的首页,持续学…

如何把电脑上的游戏串流助手设置为开机自启动?

注意&#xff1a;想要直接将 游戏串流助手 扔进“启动”文件夹里面&#xff0c;是没有用的&#xff0c;重启电脑根本打不开游戏串流助手&#xff01; 步骤一&#xff1a;每次双击 游戏串流助手之后&#xff0c;都会弹出这个用户账户控制&#xff0c;我们第一步就是要把这个禁用…