基于Vue3.0 Node.js 的 大文件切片上传、秒传、断点续传实现方案梳理

✨💻 在处理大文件上传时,切片上传是提高效率与用户体验的关键技术之一。下面将详细介绍如何在前端利用Vue框架与Node.js后端配合,实现这一功能。

👆🏻大体流程

在这里插入图片描述

👆🏻一、文件切片上传

  1. 通过文件选择器获取用户选择文件
<template><div><input label="选择附件" type="file" @change="handleFileChange" /><div @click="handleUpload">上传附件</div></div>
</template>
<script>handleFileChange(e) {this.container.file = e.target.files;}
</script>
  1. 设定分片大小,将文件切片成多个文件块
<script>const SIZE = 10 * 1024 * 1024; // 切片大小// 生成文件切片createFileChunk(file, size = SIZE) {const fileChunkList = [];let cur = 0;while (cur < file.size) {fileChunkList.push({ file: file.slice(cur, cur + size) });cur += size;}return fileChunkList;},
</script>
  1. 通过 spark-md5插件以及借助 web-worker 来并行生成文件的唯一Hash标识
<script>
//入参:fileChunkList ,对应 的文件切片数组
calculateHash(fileChunkList) {return new Promise(resolve => {this.container.worker = new Worker("/hash.js");//将 fileChunkList 通过 postMessage 发送给 web-workerthis.container.worker.postMessage({ fileChunkList });//接收 web-worker 返回的消息this.container.worker.onmessage = e => {const { hash } = e.data;if (hash) {resolve(hash);}};});}
</script>工具函数 hash.js
// 导入脚本self.importScripts("/spark-md5.min.js");
// 生成文件 hash 代码
self.onmessage = e => {const { fileChunkList } = e.data;const spark = new self.SparkMD5.ArrayBuffer();let count = 0;const loadNext = index => {const reader = new FileReader();reader.readAsArrayBuffer(fileChunkList[index].file);reader.onload = e => {count++;spark.append(e.target.result);if (count === fileChunkList.length) {self.postMessage({hash: spark.end()});self.close();}// 递归计算下一个切片loadNext(count);};};loadNext(0);
};
  1. 点击上传附件按钮 开始对大文件进行切片
// 调用后端接口上传切片
async uploadChunks() {const requestList = this.data.map(({ chunk,hash }) => {const formData = new FormData();formData.append("chunk", chunk);formData.append("hash", hash);formData.append("filehash", this.container.hash);return { formData };}).map(async ({ formData }) =>//发起后端请求axios.post({url: "XXXXXXXX",data: formData}));await Promise.all(requestList); // 并发请求后端api
}const async handleUpload() {if (!this.container.file) return;const fileChunkList = this.createFileChunk(this.container.file);this.container.hash = await this.calculateHash(fileChunkList);this.data = fileChunkList.map(({ file },index) => ({chunk: file,hash: this.container.hash + "-" + index // hash + 数组下标}));await this.uploadChunks();
}

👆🏻二、文件秒传

第一步:和文件切片前几步骤相同,先获取 改文件对应的文件切片 以及 hash 值

第二步:调用后端接口查询已经成功上传的文件hash值,如果都已经上传过该文件,前端显示上传完成

👆🏻 三、断点续传

第一步:和文件切片前几步骤相同,先获取 改文件对应的文件切片 以及 hash 值

第二步:调用后端接口查询已经成功上传的文件hash值,前端将已经上传过的hash值过滤得到未上传的文件hash值

第三步:将未上传的文件hash值列表,调用上传接口上传

👆🏻四、关于后端实现(Node版)

  1. 接收切片
const http = require("http");
const path = require("path");
const fse = require("fs-extra");
const multiparty = require("multiparty");
const server = http.createServer();
const UPLOAD_DIR = path.resolve(__dirname, "..", "target"); // 大文件存储目录
server.on("request", async (req, res) => {res.setHeader("Access-Control-Allow-Origin", "*");res.setHeader("Access-Control-Allow-Headers", "*");if (req.method === "OPTIONS") {res.status = 200;res.end();return;}// 使用 multiparty 包处理前端传来的 FormData// 在 multiparty.parse 的回调中,files 参数保存了 FormData 中文件,fields 参数保存了 FormData 中非文件的字段const multipart = new multiparty.Form();multipart.parse(req, async (err, fields, files) => {if (err) {return;}const [chunk] = files.chunk;const [hash] = fields.hash;const [filehash] = fields.filehash;const chunkDir = path.resolve(UPLOAD_DIR, filehash);// 切片目录不存在,创建切片目录if (!fse.existsSync(chunkDir)) {await fse.mkdirs(chunkDir);}// fs-extra 专用方法,类似 fs.rename 并且跨平台// fs-extra 的 rename 方法 windows 平台会有权限问题await fse.move(chunk.path, `${chunkDir}/${hash}`);res.end("received file chunk");});
});
server.listen(3000, () => console.log("正在监听 3000 端口"));
  1. 合并切片
//通过readStream流读文件
const pipeStream = (path, writeStream) =>new Promise(resolve => {const readStream = fse.createReadStream(path);readStream.on("end", () => {fse.unlinkSync(path);resolve();});readStream.pipe(writeStream);});
//合并切片
const mergeFileChunk = async (filePath, filehash, size) => {const chunkDir = path.resolve(UPLOAD_DIR, filehash);const chunkPaths = await fse.readdir(chunkDir);// 根据切片下标进行排序// 否则直接读取目录的获得的顺序可能会错乱chunkPaths.sort((a, b) => a.split("-")[1] - b.split("-")[1]);await Promise.all(chunkPaths.map((chunkPath, index) =>pipeStream(path.resolve(chunkDir, chunkPath),// 指定位置创建可写流fse.createWriteStream(filePath, {start: index * size,end: (index + 1) * size}))));fse.rmdirSync(chunkDir); // 合并后删除保存切片的目录
};

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

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

相关文章

力扣每日一题 6/11 暴力搜索

博客主页&#xff1a;誓则盟约系列专栏&#xff1a;IT竞赛 专栏关注博主&#xff0c;后期持续更新系列文章如果有错误感谢请大家批评指出&#xff0c;及时修改感谢大家点赞&#x1f44d;收藏⭐评论✍ 419.甲板上的战舰[中等] 题目&#xff1a; 给你一个大小为 m x n 的矩阵 b…

OAK-D-Long-Range: 让你的机器人拥有鹰一样的视觉!3D视觉精度与点云方案!

OAK-D LONG RANGE – 精度与点云 有没有想过让你的机器人有鹰的视力&#xff1f;来看看我们OAK-D-Long Range相机吧&#xff01;这是一款3DAI相机&#xff0c;为全球项目带来了超强的视觉效果&#xff01;让我们深入了解它是如何通过15cm的基线做到这一点的&#xff01; 15CM…

Boosting Weakly-Supervised Temporal Action Localization with Text Information

标题&#xff1a;利用文本信息增强弱监督时间动作定位 源文链接&#xff1a;https://openaccess.thecvf.com/content/CVPR2023/papers/Li_Boosting_Weakly-Supervised_Temporal_Action_Localization_With_Text_Information_CVPR_2023_paper.pdfhttps://openaccess.thecvf.com/…

Python3 Matplotlib展示数据

matplotlib 是一个 Python 库&#xff0c;用于创建各种类型的图表和可视化。它提供了一个类似于 MATLAB 的绘图界面&#xff0c;使用户能够轻松地绘制线图、散点图、直方图、饼图等各种图表类型。matplotlib 可以在 Python 脚本、IPython shell、Jupyter Notebook 等环境中使用…

Oracle中的模糊查询

在 Oracle 中&#xff0c;模糊查询指的是在查询数据时使用通配符来匹配模式&#xff0c;而不是精确匹配特定的值。常用的通配符包括 %&#xff08;匹配任意字符&#xff09;和 _&#xff08;匹配单个字符&#xff09;&#xff0c;用于在 WHERE 子句中进行模糊匹配。 实现模糊查…

科技赋能冷链园区:可视化带来全新体验

应用图扑可视化技术&#xff0c;冷链园区能够更加直观地监控和管理资源&#xff0c;优化运作流程&#xff0c;提高运营效率与服务质量。

Python的pytest框架(6)--测试钩子(hooks)

在pytest中&#xff0c;测试钩子&#xff08;hooks&#xff09;是一组特定的函数&#xff0c;它们允许你在测试过程的不同阶段插入自定义的逻辑。这些钩子函数可以让你在测试开始、测试结束、测试失败等时刻执行特定的操作。 pytest提供了一系列的钩子函数&#xff0c;你可以通…

贪心算法学习四

例题一 解法&#xff08;暴⼒解法 -> 贪⼼&#xff09;&#xff1a; 暴⼒解法&#xff1a; a. 依次枚举所有的起点&#xff1b; b. 从起点开始&#xff0c;模拟⼀遍加油的流程 贪⼼优化&#xff1a; 我们发现&#xff0c;当从 i 位置出发&#xff0c;⾛了 step 步…

怎么把webp文件转换为jpg?快来试试这四种转换方法!

怎么把webp文件转换为jpg&#xff1f;Webp是一种不常见的图片格式&#xff0c;这种格式在使用过程中有很多缺点&#xff0c;首先它的浏览器兼容性不是很强&#xff0c;这就代表大家无法随意进行网络传输&#xff0c;可能需要准备特定的操作才能进行&#xff0c;然后编辑webp的工…

查看服务器端口,如何查看服务器端口是多少并修改

查看服务器端口并修改内容是一个涉及网络管理和系统配置的专业任务。以下是一个详细的步骤说明&#xff0c;用于查看和修改服务器端口。 一、查看服务器端口 1. 使用命令行工具&#xff1a; - 对于Linux或Unix系统&#xff0c;可以使用netstat、lsof或ss等命令来查看端口状…

网络编程概述

网络编程是利用计算机网络进行数据交换和通信的过程&#xff0c;涉及不同主机间的数据传输与设备连接通信。 在现代数字化时代&#xff0c;网络编程已成为开发互联网应用不可或缺的技术。它不仅支撑着网页浏览、邮件传输等基础功能&#xff0c;还是实现复杂网络服务和应用的基…

Android中如何知道我使用的是 AndroidX 库还是 Support Library

在Android中&#xff0c;要确定你正在使用AndroidX库还是Support Library&#xff0c;你可以通过检查项目的依赖配置以及代码中的引用。以下是几种方法来确定这一点&#xff1a; 检查build.gradle文件&#xff1a; 在你的项目的build.gradle&#xff08;Module: app&#xff09…

redis大key对持久化的影响

我在“redis持久化方式——AOF\RDB”中详细介绍了redis持久化的策略&#xff0c;一言蔽之&#xff0c;就是将数据库的内存数据保存在磁盘文件中&#xff0c;本文讲解大key对redis持久化的影响 什么是大key&#xff1f; redis中的数据以key——value形式存储&#xff0c;大key…

机器学习常见的sampling策略 附PyTorch实现

初始工作 定义一个模拟的长尾数据集 import torch import numpy as np import random from torch.utils.data import Dataset, DataLoadernp.random.seed(0) random.seed(0) torch.manual_seed(0) class LongTailDataset(Dataset):def __init__(self, num_classes25, max_sam…

信息量、香农熵、交叉熵、KL散度的意义

文章目录 1. 信息量2. 香农熵3. 交叉熵4. KL散度(Kullback-Leibler Divergence(Relative Entropy)) 1. 信息量 相关概念&#xff1a; 对于一个事件&#xff1a; 小概率 – > 大的信息量大概率 – > 小的信息量多个独立事件的信息量计算可以直接相加 表达公式&#xf…

开关阀(1):定位器与电磁阀的区别

气动阀门带电磁阀是控制气源开关的&#xff0c;如果装配阀门定位器即为调节型&#xff1f; 一般来说&#xff0c;电磁阀就是控制气源通断的&#xff0c;用于阀门快速的全开或全关&#xff0c;电磁阀是得电与失电是起开关作用。 定位器是控制气源压力的大小&#xff0c;控制阀门…

数据结构---二叉树的性质总结

第i层上的节点数 证明: 二叉树的最大节点数 证明: 第一层对应2^0个节点, 累加得到 这是一个等比数列 求和公式: 那么这里的n指的是一共有多少个相加 根据从b到a一共有b-a1个可推出 有(k-1)-01个相加 那么结果为: 叶节点与度为2的节点关系 证明: 假设二叉树的总节点数为 NNN…

解决动态权限路由页面刷新空白404

需要将任意路由 path: /:pathMatch(.*)* 从固定路由中提取出来&#xff0c;在刷新时&#xff0c;等待用户信息获取完毕&#xff0c;将动态路由和任意路由通过 router.addRoute() 重新添加到路由中 // 固定路由 export const constantRoute [ ... ]// 权限路由 export const …

主键的定义,理解

"主键"是数据库中的一个术语&#xff0c;用于标识数据库表中的每一条记录的唯一标识。主键的特点如下&#xff1a; 唯一性&#xff1a;每个表中的主键值必须是唯一的&#xff0c;这样每条记录都能被准确地识别和检索。不可更改性&#xff1a;一旦定义&#xff0c;主…

常数变易法求解非齐次线性微分方程

文章目录 常数变易法求解一阶非齐次线性微分方程常数变易法求解二阶非齐次线性微分方程例题 常数变易法求解一阶非齐次线性微分方程 对于一阶非齐次线性微分方程 y ′ p ( x ) y q ( x ) y p(x)y q(x) y′p(x)yq(x) 先用分离变量法求解对应的齐次方程 y ′ p ( x ) y 0…