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

本文主要是介绍基于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); // 合并后删除保存切片的目录
};

这篇关于基于Vue3.0 Node.js 的 大文件切片上传、秒传、断点续传实现方案梳理的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



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

相关文章

Java Response返回值的最佳处理方案

《JavaResponse返回值的最佳处理方案》在开发Web应用程序时,我们经常需要通过HTTP请求从服务器获取响应数据,这些数据可以是JSON、XML、甚至是文件,本篇文章将详细解析Java中处理... 目录摘要概述核心问题:关键技术点:源码解析示例 1:使用HttpURLConnection获取Resp

python实现svg图片转换为png和gif

《python实现svg图片转换为png和gif》这篇文章主要为大家详细介绍了python如何实现将svg图片格式转换为png和gif,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录python实现svg图片转换为png和gifpython实现图片格式之间的相互转换延展:基于Py

Python利用ElementTree实现快速解析XML文件

《Python利用ElementTree实现快速解析XML文件》ElementTree是Python标准库的一部分,而且是Python标准库中用于解析和操作XML数据的模块,下面小编就来和大家详细讲讲... 目录一、XML文件解析到底有多重要二、ElementTree快速入门1. 加载XML的两种方式2.

Java的栈与队列实现代码解析

《Java的栈与队列实现代码解析》栈是常见的线性数据结构,栈的特点是以先进后出的形式,后进先出,先进后出,分为栈底和栈顶,栈应用于内存的分配,表达式求值,存储临时的数据和方法的调用等,本文给大家介绍J... 目录栈的概念(Stack)栈的实现代码队列(Queue)模拟实现队列(双链表实现)循环队列(循环数组

C++如何通过Qt反射机制实现数据类序列化

《C++如何通过Qt反射机制实现数据类序列化》在C++工程中经常需要使用数据类,并对数据类进行存储、打印、调试等操作,所以本文就来聊聊C++如何通过Qt反射机制实现数据类序列化吧... 目录设计预期设计思路代码实现使用方法在 C++ 工程中经常需要使用数据类,并对数据类进行存储、打印、调试等操作。由于数据类

Python实现图片分割的多种方法总结

《Python实现图片分割的多种方法总结》图片分割是图像处理中的一个重要任务,它的目标是将图像划分为多个区域或者对象,本文为大家整理了一些常用的分割方法,大家可以根据需求自行选择... 目录1. 基于传统图像处理的分割方法(1) 使用固定阈值分割图片(2) 自适应阈值分割(3) 使用图像边缘检测分割(4)

Android实现在线预览office文档的示例详解

《Android实现在线预览office文档的示例详解》在移动端展示在线Office文档(如Word、Excel、PPT)是一项常见需求,这篇文章为大家重点介绍了两种方案的实现方法,希望对大家有一定的... 目录一、项目概述二、相关技术知识三、实现思路3.1 方案一:WebView + Office Onl

C# foreach 循环中获取索引的实现方式

《C#foreach循环中获取索引的实现方式》:本文主要介绍C#foreach循环中获取索引的实现方式,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录一、手动维护索引变量二、LINQ Select + 元组解构三、扩展方法封装索引四、使用 for 循环替代

Spring Security+JWT如何实现前后端分离权限控制

《SpringSecurity+JWT如何实现前后端分离权限控制》本篇将手把手教你用SpringSecurity+JWT搭建一套完整的登录认证与权限控制体系,具有很好的参考价值,希望对大家... 目录Spring Security+JWT实现前后端分离权限控制实战一、为什么要用 JWT?二、JWT 基本结构

Java实现优雅日期处理的方案详解

《Java实现优雅日期处理的方案详解》在我们的日常工作中,需要经常处理各种格式,各种类似的的日期或者时间,下面我们就来看看如何使用java处理这样的日期问题吧,感兴趣的小伙伴可以跟随小编一起学习一下... 目录前言一、日期的坑1.1 日期格式化陷阱1.2 时区转换二、优雅方案的进阶之路2.1 线程安全重构2