文件上传之大文件分块上传进度控制处理

2024-01-28 12:36

本文主要是介绍文件上传之大文件分块上传进度控制处理,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

在分块上传内容结束以后的事件监听,我们会实现 unlinkSync 删除临时文件操作,那么试想一下,在这个事件监听中,我们是否可以通过totalChunks以及currentChunk获取当前上传的进度情况呢?

后端

upload上传接口:
app.post('/upload',upload.single('file'),(req,res) => {const file = req.file; const filename = req.body.filename;const totalChunks = parseInt(req.body.totalChunks);    // 获取总块数const currentChunk = parseInt(req.body.currentChunk);  // 获取当前块数const chunkPath = path.join("uploads/",`${filename}-chunk-${currentChunk}`); const chunkStream = fs.createReadStream(file.path);const writeStream = fs.createWriteStream(chunkPath);chunkStream.pipe(writeStream);// 对分块上传内容结束以后的事件监听chunkStream.on("end", () => {fs.unlinkSync(file.path); //读取文件块的流结束后,删除临时文件// 打印 progress 我们就可以获取到文件进度情况const progress = ((currentChunk + 1) / totalChunks) * 100;  // 计算上传进度情况res.json({ progress }); // 服务器端向客户端进行返回操作});
});

前端

html:

<input type="file" id="fileInput">
<progress value="0" max="100" id="progress"></progress>  //设置一个进度条
<button onclick="upload()">上传文件</button>
script:
async function upload() {const fileInput = document.getElementById('fileInput'); //获取input框const file = fileInput.files[0]; // 对input的文件进行获取const chunkSize = 1*1024*1024;  //初始化分块的尺寸 每块分块文件大小为1MB(1兆)const totalChunks = Math.ceil(file.size / chunkSize); //通过文件尺寸计算出所有的块数let currentChunk = 0; //设置块的初始值// 通过while循环处理while (currentChunk < totalChunks){const start = currentChunk * chunkSize;  // 计算当前块的起始位置const end = Math.min(start + chunkSize, file.size); // 计算当前块的结束  Math.min:返回一组数值中的最小值const chunk = file.slice(start, end); // 切割文件获取当前块const formData = new FormData();formData.append('file', chunk); // 添加当前块到 FormData 对象formData.append('filename', file.name); // 添加文件名到 FormData 对象formData.append('totalChunks', totalChunks); // 添加总块数到 FormData 对象formData.append('currentChunk', currentChunk); // 添加当前块数到 FormData 对象try{// 获取返回的内容(进度)const res = await axios.post('http://localhost:3000/upload',formData,{headers:{'Content-Type':'multipart/form-data',},}); //发送当前块的上传请求const { progress } = res.data;  // 获取当前块的上传进度document.getElementById('progress').value = progress; // 更新进度}catch(error){console.error(error);return;}currentChunk++; //增加当前块数,继续下一块的上传(实现循环操作)}// 当所有分块文件发送完毕,发起合并请求操作try{const postData = { filename:file.name,totalChunks:totalChunks }; //构造合并请求的数据await http.post('http://localhost:3000/merge', postData,{headers: {'Content-Type': 'application/json'}}); //发送合并请求}catch(error){console.error(error);}
}

再次发送文件,进度条已经正常显示:

这篇关于文件上传之大文件分块上传进度控制处理的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/653647

相关文章

电脑提示xlstat4.dll丢失怎么修复? xlstat4.dll文件丢失处理办法

《电脑提示xlstat4.dll丢失怎么修复?xlstat4.dll文件丢失处理办法》长时间使用电脑,大家多少都会遇到类似dll文件丢失的情况,不过,解决这一问题其实并不复杂,下面我们就来看看xls... 在Windows操作系统中,xlstat4.dll是一个重要的动态链接库文件,通常用于支持各种应用程序

SQL Server数据库死锁处理超详细攻略

《SQLServer数据库死锁处理超详细攻略》SQLServer作为主流数据库管理系统,在高并发场景下可能面临死锁问题,影响系统性能和稳定性,这篇文章主要给大家介绍了关于SQLServer数据库死... 目录一、引言二、查询 Sqlserver 中造成死锁的 SPID三、用内置函数查询执行信息1. sp_w

Java对异常的认识与异常的处理小结

《Java对异常的认识与异常的处理小结》Java程序在运行时可能出现的错误或非正常情况称为异常,下面给大家介绍Java对异常的认识与异常的处理,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参... 目录一、认识异常与异常类型。二、异常的处理三、总结 一、认识异常与异常类型。(1)简单定义-什么是

Golang 日志处理和正则处理的操作方法

《Golang日志处理和正则处理的操作方法》:本文主要介绍Golang日志处理和正则处理的操作方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考... 目录1、logx日志处理1.1、logx简介1.2、日志初始化与配置1.3、常用方法1.4、配合defer

springboot加载不到nacos配置中心的配置问题处理

《springboot加载不到nacos配置中心的配置问题处理》:本文主要介绍springboot加载不到nacos配置中心的配置问题处理,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑... 目录springboot加载不到nacos配置中心的配置两种可能Spring Boot 版本Nacos

Python远程控制MySQL的完整指南

《Python远程控制MySQL的完整指南》MySQL是最流行的关系型数据库之一,Python通过多种方式可以与MySQL进行交互,下面小编就为大家详细介绍一下Python操作MySQL的常用方法和最... 目录1. 准备工作2. 连接mysql数据库使用mysql-connector使用PyMySQL3.

如何搭建并配置HTTPD文件服务及访问权限控制

《如何搭建并配置HTTPD文件服务及访问权限控制》:本文主要介绍如何搭建并配置HTTPD文件服务及访问权限控制的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、安装HTTPD服务二、HTTPD服务目录结构三、配置修改四、服务启动五、基于用户访问权限控制六、

python web 开发之Flask中间件与请求处理钩子的最佳实践

《pythonweb开发之Flask中间件与请求处理钩子的最佳实践》Flask作为轻量级Web框架,提供了灵活的请求处理机制,中间件和请求钩子允许开发者在请求处理的不同阶段插入自定义逻辑,实现诸如... 目录Flask中间件与请求处理钩子完全指南1. 引言2. 请求处理生命周期概述3. 请求钩子详解3.1

Python处理大量Excel文件的十个技巧分享

《Python处理大量Excel文件的十个技巧分享》每天被大量Excel文件折磨的你看过来!这是一份Python程序员整理的实用技巧,不说废话,直接上干货,文章通过代码示例讲解的非常详细,需要的朋友可... 目录一、批量读取多个Excel文件二、选择性读取工作表和列三、自动调整格式和样式四、智能数据清洗五、

GitLab文件的上传与下载方式

《GitLab文件的上传与下载方式》:本文主要介绍GitLab文件的上传与下载方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录GitLab 项目拉取到本地GitLab 项目上传方法方法 1:本地项目未初始化Git方法 2:本地项目已初始化GitGitLab 上