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

vue 大文件视频切片上传处理方法

前端上传大文件、视频的时候会出现超时、过大、很慢等情况,为了解决这一问题,跟后端配合做了一个切片的功能。

我这个切片功能是基于 minion 的,后端会把文件放在minion服务器上。具体看后端怎么做

1、在项目的 util(这个文件夹是自己创建的,如果项目里没有可以自行创建) 文件家中创建一个js文件 upload.js   在js文件中添加如下代码:

import axios from 'axios';
import md5 from 'js-md5' //引入MD5加密
export const uploadByPieces = ({ urlList, file, pieceSize, progress, beforeSuccess, success, error }) => {// 如果文件传入为空直接 return 返回if (!file) returnlet fileMD5 = ''// 总文件列表const chunkSize = pieceSize * 1024 * 1024 // 5MB一片const chunkCount = Math.ceil(file.size / chunkSize - 1) // 总片数// 获取md5const readFileMD5 = () => {// 读取视频文件的md5// console.log("获取文件的MD5值")let fileRederInstance = new FileReader()// console.log('file', file)fileRederInstance.readAsBinaryString(file)fileRederInstance.addEventListener('load', e => {let fileBolb = e.target.resultfileMD5 = md5(fileBolb)// console.log('fileMD5', fileMD5)// console.log("文件未被上传,将分片上传")readChunkMD5()})}const getChunkInfo = (file, currentChunk, chunkSize) => {let start = currentChunk * chunkSizelet end = Math.min(file.size, start + chunkSize)let chunk = file.slice(start, end)return { start, end, chunk }}// 针对每个文件进行chunk处理const readChunkMD5 = () => {// 针对单个文件进行chunk上传for (var i = 0; i < chunkCount; i++) {const { chunk } = getChunkInfo(file, i, chunkSize)// console.log("切片地址123" + urlList)// console.log("总片数" + chunkCount)// console.log("分片后的数据---测试:" + i)// console.log(chunk)let fileUrl = urlList[i];// console.log(fileUrl,'地址');uploadChunk({ chunk, currentChunk: i, chunkCount, fileUrl })}}const uploadChunk = (chunkInfo) => {// 上传请求方式1 (根据自身情况自行选择)// console.log(chunkInfo.chunk,'chunkInfochunkInfo');let files = chunkInfo.chunkaxios.put(chunkInfo.fileUrl,files).then((res) => {// console.log("分片上传返回信息:"+ res)if (res.status == 200) {// 下面如果在项目中没有用到可以不用打开注释if (chunkInfo.currentChunk < chunkInfo.chunkCount - 1) {beforeSuccess()} else {// 当总数大于等于分片个数的时候if ((chunkInfo.currentChunk + 1) == chunkInfo.chunkCount) {// console.log("文件开始------合并成功")success(res.data[0])}}}}).catch((e) => {console.log('失败!');error && error(e)})}readFileMD5() // 开始执行代码
}

js-md5 如果没有的话需要自己在项目里安装:

npm install js-md5

2、创建一个上传视频文件的公共组件,便于不同地方引用,如下:

<template><div class="container" style="display:inline-block;width: 200px;"><el-uploadclass="upload-demo"action="#":multiple="false":auto-upload="false"accept=".mp4":on-change="handleChange":show-file-list="false"><el-button slot="trigger" size="small" type="primary" :disabled="isUploadVideo">选择视频</el-button><!-- <el-button size="small" type="primary" @click="uploadVideo()" style="margin-left: 10px;">开始上传</el-button> --></el-upload><!-- 进度条 --><el-progress v-if="progressFlag" :percentage="loadProgress"></el-progress></div>
</template><script>
import {mapGetters} from "vuex"; 
import { uploadByPieces } from '@/util/upload-video'
import api from "@/api/mes2/index-lhj"
export default {data() {return {isUploadVideo: false,uploadId: '', // 切片视频的唯一id(后端返回)fileNameVal: '', // 文件名称(后端返回)listUrl: [], // 切片路径集合loadProgress: 0, // 动态显示进度条progressFlag: false, // 关闭进度条}},created(){},computed: {   ...mapGetters(["userInfo"]),   }, props:{paramsData: {type: Object,default: {}}},methods: {// 选择视频handleChange(file, fileList) {this.isUploadVideo = true;this.progressFlag = true; // 显示进度条this.loadProgress = 10; // 动态获取文件上传进度let fileSizeVal = file.size / 1024 / 1024;let numVal = null;if(fileSizeVal <= 20){numVal = 1;}else{numVal = Math.ceil(file.size / (10 * 1024 * 1024));}let params = {fileName: file.name,partCount: numVal - 1,tenantId: this.userInfo.tenant_id,fileType: "mp4",fileSize: file.size,sourceId: this.paramsData.id,sourceType: this.paramsData.inspectionType,sourceSystem: "MES2",hierarchyCode:"MES2"}api.queryUploadBigFileUrl(params).then((res) => {this.loadProgress = 20;this.listUrl = res.data.data.partUrlList;this.uploadId = res.data.data.uploadId;this.fileNameVal = res.data.data.fileName// 调用切片方法uploadByPieces({urlList: this.listUrl,file: file.raw, // 视频实体pieceSize: 10, // 分片大小beforeSuccess: data => {// 进度数 / 切片总数let progress = Math.floor(70 / (numVal - 1)); // 计算进度this.loadProgress += progress;},success: data => {// console.log('分片上传视频成功', data)this.getFileAll(numVal)},error: e => {console.log('分片上传视频失败', e)this.$message.error('视频切片上传失败,请重新上传!')this.progressFlag = false}})}).catch(() => {this.$message.error('发生错误,请重新上传!')this.progressFlag = false})},// 整合切片文件getFileAll(numVal){let params = {partCount: numVal - 1,tenantId: this.userInfo.tenant_id,uploadId: this.uploadId,fileName: this.fileNameVal,}this.loadProgress = 95;api.queryUploadBigFile(params).then((res) => {if(res.data.data === false){this.isUploadVideo = false;this.$message.error('视频切片合并失败,请重新上传!')setTimeout( () => {this.progressFlag = false}, 1000) // 一秒后关闭进度条}else{this.loadProgress = 100;this.isUploadVideo = false;this.$message.success('视频上传成功!')this.$emit('uploadVideoData');if (this.loadProgress >= 100) {this.loadProgress = 100setTimeout( () => {this.progressFlag = false}, 1000) // 一秒后关闭进度条}}}).catch(() => {this.isUploadVideo = false;this.$message.error('视频合并上传失败,请重新上传!')})},},
}
</script><style scoped lang="scss"></style>

具体根据自己的实际情况进行修改即可!

至此完成!!!

测试有效!!!感谢支持!!!

相关文章:

vue 大文件视频切片上传处理方法

前端上传大文件、视频的时候会出现超时、过大、很慢等情况&#xff0c;为了解决这一问题&#xff0c;跟后端配合做了一个切片的功能。 我这个切片功能是基于 minion 的&#xff0c;后端会把文件放在minion服务器上。具体看后端怎么做 1、在项目的 util(这个文件夹是自己创建的…...

痞子衡嵌入式:AppCodeHub - 一站网罗恩智浦MCU应用程序

近日&#xff0c;恩智浦官方隆重上线了应用程序代码中心(Application Code Hub&#xff0c;简称 ACH)&#xff0c;这是恩智浦 MCUXpresso 软件生态的一个重要组成部分。痞子衡之所以要如此激动地告诉大家这个好消息&#xff0c;是因为 ACH 并不是又一个恩智浦官方 github proje…...

打造数字化营销闭环,破解精准获客难题

现阶段&#xff0c;企业需要进行数字化营销闭环&#xff0c;以实现更精确的客户获取。随着数字技术的迅猛发展&#xff0c;企业需要将在线广告、社交媒体营销和数据分析等工具相互结合&#xff0c;建立一个完整的数字化营销流程。通过使用客户细分、精准定位和个性化广告等手段…...

《雷达像智能识别对抗研究进展》阅读记录

&#xff08;1&#xff09;引言 ​ 神经网络通常存在鲁棒性缺陷&#xff0c;易受到对抗攻击的威胁。攻击者可以隐蔽的诱导雷达智能目标识别做出错误预测&#xff0c;如&#xff1a; ​ a图是自行车&#xff0c;加上对抗扰动后神经网络就会将其识别为挖掘机。 &#xff08;2&a…...

【AHB】初识 AHB 总线

AHB 与 APB、ASB同属于 AMBA 总线架构规范&#xff0c;该总线规范由 ARM 公司提出。 目录 一、AHB 总线 二、AHB 总线组成 三、AHB 主从通信过程 一、AHB 总线 AHB&#xff08;Advanced High Performance Bus&#xff09;,意为高级高性能总线&#xff0c;能将微控制器&…...

Linux服务使用宝塔面板搭建网站,通过内网穿透实现公网访问

文章目录 前言1. 环境安装2. 安装cpolar内网穿透3. 内网穿透4. 固定http地址5. 配置二级子域名6. 创建一个测试页面 前言 宝塔面板作为简单好用的服务器运维管理面板&#xff0c;它支持Linux/Windows系统&#xff0c;我们可用它来一键配置LAMP/LNMP环境、网站、数据库、FTP等&…...

C++ 判断

判断结构要求程序员指定一个或多个要评估或测试的条件&#xff0c;以及条件为真时要执行的语句&#xff08;必需的&#xff09;和条件为假时要执行的语句&#xff08;可选的&#xff09;。 下面是大多数编程语言中典型的判断结构的一般形式&#xff1a; 判断语句 C 编程语言…...

“解引用“空指针一定会导致段错误吗?

可能有些朋友看见这个标题第一反应是嵌入式的某些内存中,0地址也是可以被正常访问的,所以对0地址的解引用不会发生错误,但我要说的情况不是这个,而是指一个真正的空指针,不仅是c/c中的0,(void*)0,NULL,还有nullptr,一个真正的空指针. 在c语言中,想获得某结构体的成员变量相对偏…...

釉面陶瓷器皿SOR/2016-175标准上架亚马逊加拿大站

亲爱的釉面陶瓷器皿和玻璃器皿制造商和卖家&#xff0c;亚马逊加拿大站将执行SOR/2016-175法规。这是一份新的法规&#xff0c;规定了含有铅和镉的釉面陶瓷器和玻璃器皿需要满足的要求。让我们一起来看一看&#xff0c;为什么要实行SOR/2016-175法规&#xff1f;这是一个保护消…...

Redux - Redux在React函数式组件中的基本使用

文章目录 一&#xff0c;简介二&#xff0c;安装三&#xff0c;三大核心概念Store、Action、Reducer3.1 Store3.2 Reducer3.3 Action 四&#xff0c;开始函数式组件中使用4.1&#xff0c;引入store4.1&#xff0c;store.getState()方法4.3&#xff0c;store.dispatch()方法4.4&…...

rust学习-同时执行多Future

只用 .await 来执行future,会阻塞并发任务,直到特定的 Future 完成 join!:等待所有future完成 可事实上为什么都是res1完成后再执行res2? join! 不保证并发执行,难道只负责同步等待? 示例 [package] name = "rust_demo5" version = "0.1.0" edit…...

问道管理:旅游酒店板块逆市拉升,桂林旅游、华天酒店涨停

游览酒店板块14日盘中逆市拉升&#xff0c;到发稿&#xff0c;桂林游览、华天酒店涨停&#xff0c;张家界涨超8%&#xff0c;君亭酒店涨超5%&#xff0c;众信游览、云南游览涨逾4%。 音讯面上&#xff0c;8月10日&#xff0c;文旅部办公厅发布康复出境团队游览第三批名单&#…...

算法通关村第三关——数组白银

文章目录 一、删除元素1.1 原地移除所有值等于val的元素1.2 删除有序数组中的重复项 二、元素奇偶移动三、数组轮转 一、删除元素 1.1 原地移除所有值等于val的元素 LeetCode 27.移除元素 解法1&#xff1a;快慢指针 class Solution {public int removeElement(int[] nums, …...

黑客利用 Facebook 漏洞,发起网络钓鱼攻击

Bleeping Computer 网站披露&#xff0c;网络攻击者利用 Salesforce 电子邮件服务和 SMTP 服务器中的漏洞&#xff0c;针对一些特定的 Facebook 账户发起复杂的网络钓鱼活动。 据悉&#xff0c;网络攻击者利用 Salesforce 等具有良好信誉的电子邮件网关分发网络钓鱼电子邮件&am…...

React Router@3.x 升级到 @6.x 的实战

一、概述 目前公司产品有关 react 的工具版本普遍较低,其中react router版本为 3.x(是的,没有看错,3.x 的版本,4年前的版本)。而最新的 react router 已经到了 6.x 版本。 为了能够跟上路由的脚步,也为了使用 router 相关的 hooks 函数,一次必不可少的升级由此到来!由于…...

LAXCUS和GPU软硬件结合,构建强大算力生态

随着科技的不断进步&#xff0c;计算机技术已经渗透到我们生活的方方面面。其中&#xff0c;GPU(图形处理器)作为一种强大的计算设备&#xff0c;已经成为了人工智能、大数据、云计算等领域的核心硬件之一。然而&#xff0c;传统操作系统都是单机系统&#xff0c;只能在一台计算…...

学会这一招,轻松玩转小程序自动化

jmeter 可以做性能测试&#xff0c;这个很多人都知道&#xff0c;那你知道&#xff0c;jmeter 可以在启动运行时&#xff0c;指定线程数和运行时间&#xff0c;自定义性能场景吗&#xff1f; jmeter 性能测试&#xff0c;动态设定性能场景 平时&#xff0c;我们使用 jmeter 进…...

Mongodb 更新集合的方法到底有几种 (上) ?

更新方法 Mongodb 使用以下几种方法来更新文档 &#xff0c; Mongodb V5.0 使用 mongosh 客户端&#xff1a; db.collection.updateOne(<filter>, <update>, <options>) db.collection.updateMany(<filter>, <update>, <options>) db.c…...

推荐5款能帮你解决各种问题的神器

​ 今天我要向大家推荐5款超级好用的效率软件&#xff0c;无论是在学习还是办公中都能够极大地提高效率。这些软件可以帮助你解决许多问题&#xff0c;而且每个都是真正的神器。 网速和硬件监控——TrafficMonitor ​ TrafficMonitor 是一款可以在任务栏或桌面悬浮窗显示系统…...

绕过 open_basedir

目录 0x01 首先了解什么是 open_basedir 0x02 通过命令执行绕过 0x03 通过symlink 绕过 &#xff08;软连接&#xff09; 0x04利用glob://绕过 方式1——DirectoryIteratorglob:// 方式2——opendir()readdir()glob:// 0x05 通过 ini_set和chdir来绕过 在ctfshow 72遇到…...

服务器硬防的应用场景都有哪些?

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式&#xff0c;避免服务器受到各种恶意攻击和网络威胁&#xff0c;那么&#xff0c;服务器硬防通常都会应用在哪些场景当中呢&#xff1f; 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

基于当前项目通过npm包形式暴露公共组件

1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹&#xff0c;并新增内容 3.创建package文件夹...

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上&#xff0c;所以报错&#xff0c;到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本&#xff0c;cu、torch、cp 的版本一定要对…...

有限自动机到正规文法转换器v1.0

1 项目简介 这是一个功能强大的有限自动机&#xff08;Finite Automaton, FA&#xff09;到正规文法&#xff08;Regular Grammar&#xff09;转换器&#xff0c;它配备了一个直观且完整的图形用户界面&#xff0c;使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...

视频行为标注工具BehaviLabel(源码+使用介绍+Windows.Exe版本)

前言&#xff1a; 最近在做行为检测相关的模型&#xff0c;用的是时空图卷积网络&#xff08;STGCN&#xff09;&#xff0c;但原有kinetic-400数据集数据质量较低&#xff0c;需要进行细粒度的标注&#xff0c;同时粗略搜了下已有开源工具基本都集中于图像分割这块&#xff0c…...

Python Einops库:深度学习中的张量操作革命

Einops&#xff08;爱因斯坦操作库&#xff09;就像给张量操作戴上了一副"语义眼镜"——让你用人类能理解的方式告诉计算机如何操作多维数组。这个基于爱因斯坦求和约定的库&#xff0c;用类似自然语言的表达式替代了晦涩的API调用&#xff0c;彻底改变了深度学习工程…...

Java 与 MySQL 性能优化:MySQL 慢 SQL 诊断与分析方法详解

文章目录 一、开启慢查询日志&#xff0c;定位耗时SQL1.1 查看慢查询日志是否开启1.2 临时开启慢查询日志1.3 永久开启慢查询日志1.4 分析慢查询日志 二、使用EXPLAIN分析SQL执行计划2.1 EXPLAIN的基本使用2.2 EXPLAIN分析案例2.3 根据EXPLAIN结果优化SQL 三、使用SHOW PROFILE…...

aardio 自动识别验证码输入

技术尝试 上周在发学习日志时有网友提议“在网页上识别验证码”&#xff0c;于是尝试整合图像识别与网页自动化技术&#xff0c;完成了这套模拟登录流程。核心思路是&#xff1a;截图验证码→OCR识别→自动填充表单→提交并验证结果。 代码在这里 import soImage; import we…...

2025年低延迟业务DDoS防护全攻略:高可用架构与实战方案

一、延迟敏感行业面临的DDoS攻击新挑战 2025年&#xff0c;金融交易、实时竞技游戏、工业物联网等低延迟业务成为DDoS攻击的首要目标。攻击呈现三大特征&#xff1a; AI驱动的自适应攻击&#xff1a;攻击流量模拟真实用户行为&#xff0c;差异率低至0.5%&#xff0c;传统规则引…...

rm视觉学习1-自瞄部分

首先先感谢中南大学的开源&#xff0c;提供了很全面的思路&#xff0c;减少了很多基础性的开发研究 我看的阅读的是中南大学FYT战队开源视觉代码 链接&#xff1a;https://github.com/CSU-FYT-Vision/FYT2024_vision.git 1.框架&#xff1a; 代码框架结构&#xff1a;readme有…...