第二十章 Nest 大文件分片上传


在前端的文件上传功能中，只要请求头里定义 content-type 为 multipart/form-data，内容就会以下面形式传递到服务端，接着服务器再按照multipart/form-data的格式去提取数据 获取文件数据
1719751955317.png
但是当文件体积很大时 就会出现一个问题 文件越大 请求的时间会越长，会导致产品的体验很不好。
所以大文件上传时 我们要对齐进行优化 ，例如把1G的大文件 分割成10个100M的小文件，接着并行上传这些文件，服务端接收到10个文件之后再合并这10个小文件 成为一个大文件 这就是大文件分片上传的方案。

1、前端分片大文件方法

在游览器中 Blob 有着一个slice方法 可以截取特定范围的数据 File就是Blob中的一种,我们在选择文件之后可以通过slice 对 File 分片

地址：https://developer.mozilla.org/zh-CN/docs/Web/API/Blob/slice
1719752678591.png

2、后端合并分片文件的方法

在前端分片发送文件到后端全接收之后，在后端我们可以使用fs 的 createWriteStream 方法把每个分片按照不同位置写入文件

地址：https://nodejs.cn/api-v12/fs.html#fscreatewritestreampath-options
1719753140827.png

接下来我们创建项目来测试一下：

nest new large-file-sharding-upload

1719753353544.png
安装 multer 的 ts 类型的包

npm install -D @types/multer

在app.controller.ts中增加一个路由：

import { Body, Controller, Get, Post, UploadedFiles, UseInterceptors } from '@nestjs/common';
import { AppService } from './app.service';
import { FilesInterceptor } from '@nestjs/platform-express';@Controller()
export class AppController {constructor(private readonly appService: AppService) {}@Post('upload')@UseInterceptors(FilesInterceptor('files', 20, {dest: 'uploads'}))uploadFiles(@UploadedFiles() files: Array<Express.Multer.File>, @Body() body) {console.log('body', body);console.log('files', files);}
}

接着启动服务：

pnpm run start:dev

可以看到根目录下，生成了uploads 目录：
1719753839814.png
然后我们在main.ts里面开启跨域支持：

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';async function bootstrap() {const app = await NestFactory.create(AppModule);app.enableCors();await app.listen(3000);
}
bootstrap();

在根目录下新建index.html：（其中input 指定 multiple，可以选择多个文件）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 引入axios库，用于发送HTTP请求 --><script src="https://unpkg.com/axios@0.24.0/dist/axios.min.js"></script>
</head><body><input id="fileInput" type="file" /><script>/* 获取文件输入元素 */const fileInput = document.querySelector('#fileInput');/* 定义每块的大小，单位为字节 */const chunkSize = 20 * 1024;/* 当文件输入改变时，处理文件分块上传 */fileInput.onchange = async function () {/* 获取选中的文件 */const file = fileInput.files[0];console.log(file);/* 分割文件为多个块 */const chunks = [];let startPos = 0;while (startPos < file.size) {chunks.push(file.slice(startPos, startPos + chunkSize));startPos += chunkSize;}/* 对每个分块创建表单数据并发送POST请求 */chunks.map((chunk, index) => {const data = new FormData();/* 为每个分块设置唯一的名称 */data.set('name', file.name + '-' + index);/* 添加分块到表单数据 */data.append('files', chunk);/* 使用axios发送POST请求上传分块 */axios.post('http://localhost:3000/upload', data);})}</script>
</body></html>

启动前端index.html

npx http-server

1719754178991.png
游览器访问：http://127.0.0.1:8080/
1719754275979.png
接着我们上传个文件 这里我上传的文件大小为20多kb 我的切片是20kb分片一个 所以一共会分片成2给
1719754989392.png
1719755058410.png
可以看到服务端接收了2给分片
1719755090845.png
接下来 我们在服务端实现接收到服务端的数据之后 实现将同一个文件的分片 放置到单独目录中

import { Body, Controller, Get, Post, UploadedFiles, UseInterceptors } from '@nestjs/common';
import { AppService } from './app.service';
import { FilesInterceptor } from '@nestjs/platform-express';
import * as fs from 'fs';@Controller()
export class AppController {constructor(private readonly appService: AppService) { }@Post('upload')@UseInterceptors(FilesInterceptor('files', 20, {dest: 'uploads'}))uploadFiles(@UploadedFiles() files: Array<Express.Multer.File>, @Body() body) {console.log('body', body);console.log('files', files);const fileName = body.name.match(/(.+)\-\d+$/)[1];const chunkDir = 'uploads/chunks_' + fileName;if (!fs.existsSync(chunkDir)) {fs.mkdirSync(chunkDir);}fs.cpSync(files[0].path, chunkDir + '/' + body.name);fs.rmSync(files[0].path);}
}

再次上传文件 可以看到创建了目录 文件夹下有2个文件
1719755431335.png
我们在上传的时候 给文件名增加一个随机的字符串 防止重复

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 引入axios库，用于发送HTTP请求 --><script src="https://unpkg.com/axios@0.24.0/dist/axios.min.js"></script>
</head><body><input id="fileInput" type="file" /><script>/* 获取文件输入元素 */const fileInput = document.querySelector('#fileInput');/* 定义每块的大小，单位为字节 */const chunkSize = 20 * 1024;/* 当文件输入改变时，处理文件分块上传 */fileInput.onchange = async function () {/* 获取选中的文件 */const file = fileInput.files[0];console.log(file);/* 分割文件为多个块 */const chunks = [];let startPos = 0;while (startPos < file.size) {chunks.push(file.slice(startPos, startPos + chunkSize));startPos += chunkSize;}const randomStr = Math.random().toString().slice(2, 8);/* 对每个分块创建表单数据并发送POST请求 */chunks.map((chunk, index) => {const data = new FormData();/* 为每个分块设置唯一的名称 */data.set('name', randomStr + '_' + file.name + '-' + index);/* 添加分块到表单数据 */data.append('files', chunk);/* 使用axios发送POST请求上传分块 */axios.post('http://localhost:3000/upload', data);})}</script>
</body></html>

最后就是合并分片请求：

/*** 合并上传的文件片段。* * 该方法用于处理文件分片上传后的合并操作。通过读取指定目录下的所有文件片段，* 将它们按顺序拼接成完整的文件，并删除已经合并的文件片段。* * @param name 文件名，用于定位和识别待合并的文件片段。*/@Get('merge')merge(@Query('name') name: string) {// 构建存储文件片段的目录路径const chunkDir = 'uploads/chunks_' + name;// 读取文件片段目录中的所有文件const files = fs.readdirSync(chunkDir);// 初始化用于跟踪已合并文件数量的变量let startPos = 0;let count = 0;// 遍历文件片段，逐个进行合并files.map(file => {// 构建当前文件片段的完整路径const filePath = chunkDir + '/' + file;// 创建读取当前文件片段的流const stream = fs.createReadStream(filePath);// 将文件片段流式传输到目标文件，从上一个片段的结束位置开始写入stream.pipe(fs.createWriteStream('uploads/' + name, {start: startPos})).on('finish', () => {// 合并完成一个文件片段后，增加计数count++;// 如果所有文件片段都已合并完成，删除已合并的文件片段目录if (count === files.length) {fs.rmSync(chunkDir, { recursive: true });}})// 更新下一个文件片段的写入起始位置startPos += fs.statSync(filePath).size;})}

然后在前端代码里，当分片全部上传完之后，调用 merge 接口：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 引入axios库，用于发送HTTP请求 --><script src="https://unpkg.com/axios@0.24.0/dist/axios.min.js"></script>
</head><body><input id="fileInput" type="file" /><script>/* 获取文件输入元素 */const fileInput = document.querySelector('#fileInput');/* 定义每块的大小，单位为字节 */const chunkSize = 20 * 1024;/* 当文件输入改变时，处理文件分块上传 */fileInput.onchange = async function () {/* 获取选中的文件 */const file = fileInput.files[0];console.log(file);/* 分割文件为多个块 */const chunks = [];let startPos = 0;while (startPos < file.size) {chunks.push(file.slice(startPos, startPos + chunkSize));startPos += chunkSize;}const randomStr = Math.random().toString().slice(2, 8);let tasks = []/* 对每个分块创建表单数据并发送POST请求 */chunks.map((chunk, index) => {const data = new FormData();/* 为每个分块设置唯一的名称 */data.set('name', randomStr + '_' + file.name + '-' + index);/* 添加分块到表单数据 */data.append('files', chunk);tasks.push(axios.post('http://localhost:3000/upload', data));})await Promise.all(tasks)axios.get('http://localhost:3000/merge?name=' + randomStr + '_' + file.name)}</script>
</body></html>

1719757051775.png
可以看到文件分片上传之后 会执行 merge 接口 合并生成了下面文件
1719757116857.png

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

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

相关文章

08-8.6.2 败者树

08-8.6.2 败者树

&#x1f44b; Hi, I’m Beast Cheng &#x1f440; I’m interested in photography, hiking, landscape… &#x1f331; I’m currently learning python, javascript, kotlin… &#x1f4eb; How to reach me --> 458290771qq.com 喜欢《数据结构》部分笔记的小伙伴可以…
阅读更多...
QT使用QPainter绘制多边形维度图

QT使用QPainter绘制多边形维度图

多边形统计维度图是一种用于展示多个维度的数据的图表。它通过将各个维度表示为图表中的多边形的边&#xff0c;根据数据的大小和比例来确定各个维度的长度。 一、简述 本示例实现六边形战力统计维度图&#xff0c;一种将六个维度的战力统计以六边形图形展示的方法。六个维度是…
阅读更多...
六、元组、字典、集合

六、元组、字典、集合

文章目录 学习目标一、元组的使用二、字典的基本使用2.1 字典使用注意事项2.2 字典的增删改查2.3 update方法的使用2.4 合并多个dict2.5 字典的遍历2.6 字典的推导式三、集合的使用3.1 set的使用3.2 set的操作3.3 集合的高级用法四、eval与json五、可迭代对象通用方法5.1 运算符…
阅读更多...
五、python列表

五、python列表

文章目录 学习目标一、列表的基本使用二、列表的遍历2.1 while循环遍历2.2 for...in 循环遍历三、列表的排序3.1 交换两个变量的值3.2 冒泡排序3.3 列表的排序与反转方法四、列表的复制4.1 可变数据类型与不可变数据类型4.2 列表的复制五、列表的嵌套（略）六、列表推导式学习目…
阅读更多...
基于形状匹配原始版放出来（给有用的人参考2）

基于形状匹配原始版放出来（给有用的人参考2）

我们仍然讲学习。 昨天已经把80万像素1024*768的图像变成256*192图像了&#xff0c;并且使用iir高斯平滑保留了特征。 下面做的就是用roi把特征图扣出来&#xff0c;也就是所谓的模板&#xff0c;你在原图中的roi假定是200*200&#xff0c;那么在256*192中&#xff0c;就变成…
阅读更多...
怎样在 PostgreSQL 中优化对复合索引的选择性？

怎样在 PostgreSQL 中优化对复合索引的选择性？

&#x1f345;关注博主&#x1f397;️ 带你畅游技术世界&#xff0c;不错过每一次成长机会&#xff01;&#x1f4da;领书&#xff1a;PostgreSQL 入门到精通.pdf 文章目录 怎样在 PostgreSQL 中优化对复合索引的选择性一、理解复合索引的概念二、选择性的重要性三、优化复合索…
阅读更多...
ollama编译安装@focal jammy Ubuntu @FreeBSD jail

ollama编译安装@focal jammy Ubuntu @FreeBSD jail

Ollama是一个用于在本地运行大型语言模型&#xff08;LLM&#xff09;的开源框架。它支持多种操作系统&#xff0c;但是唯独不支持FreeBSD&#xff0c;于是尝试在FreeBSD的jail里安装Ubuntu&#xff0c;Ubuntu里再安装ollama。 先上结论&#xff0c;好像focal jail无法编译成功…
阅读更多...
shell脚本-linux如何在脚本中远程到一台linux机器并执行命令

shell脚本-linux如何在脚本中远程到一台linux机器并执行命令

需求&#xff1a;我们需要从11.0.1.17远程到11.0.1.16上执行命令 实现&#xff1a; 1.让11.0.1.17 可以免密登录到11.0.1.16 [rootlocalhost ~]# ssh-keygen Generating public/private rsa key pair. Enter file in which to save the key (/root/.ssh/id_rsa): Created d…
阅读更多...
【问题记录】Docker配置mongodb副本集实现数据流实时获取

【问题记录】Docker配置mongodb副本集实现数据流实时获取

配置mongodb副本集实现数据流实时获取 前言操作步骤1. docker拉取mongodb镜像2. 连接mongo1镜像的mongosh3. 在mongosh中初始化副本集 注意点 前言 由于想用nodejs实现实时获取Mongodb数据流&#xff0c;但是报错显示需要有副本集的mongodb才能实现实时获取信息流&#xff0c;…
阅读更多...
扫地机器人如何解决室内空气污染问题

扫地机器人如何解决室内空气污染问题

扫地机器人解决室内空气污染问题主要通过以下几个方面来实现&#xff1a; 一、高效清洁减少地面污染源 ①　地面清扫能力&#xff1a;扫地机器人能够自动或手动控制进行地面清扫&#xff0c;有效清除地面上的各种污渍、灰尘和毛发等污染物。这些污染物是室内空气中的重要污染源…
阅读更多...
27.js实现鼠标拖拽

27.js实现鼠标拖拽

e.offsetX是鼠标距离准确事件源的左上角距离 e.clientX是鼠标距离浏览器可视窗口左上角的距离 e.pageX是鼠标距离文档左上角的距离 /* 当鼠标点击div时开始挪动&#xff0c;当鼠标抬起&#xff0c;div静止——事件源是div 当鼠标点击后,鼠标在移动——事件源…
阅读更多...
java 前端上传文件后端解析并转发到第三方存储，Hutool 工具

java 前端上传文件后端解析并转发到第三方存储，Hutool 工具

单个文件上传 PostMapping("/upload")public MyResponse<?> upload(MultipartFile file) {if (multipartFiles null || multipartFiles.length 0) {throw new MessageException("未选择文件");}InputStreamResource inputStreamResource new Inp…
阅读更多...
通过命令行工作流提升工作效率的实战教程（持续更新）

通过命令行工作流提升工作效率的实战教程（持续更新）

大家好，我是herosunly。985院校硕士毕业，现担任算法研究员一职，热衷于机器学习算法研究与应用。曾获得阿里云天池比赛第一名，CCF比赛第二名，科大讯飞比赛第三名。拥有多项发明专利。对机器学习和深度学习拥有自己独到的见解。曾经辅导过若干个非计算机专业的学生进入到算法…
阅读更多...
从三个方向来谈谈开源项目有哪些机遇与挑战

从三个方向来谈谈开源项目有哪些机遇与挑战

开源项目有哪些机遇与挑战&#xff1f; 随着全球经济和科技环境的快速变化&#xff0c;开源软件项目的蓬勃发展成为了开发者社区的热门话题。越来越多的开发者和企业选择参与开源项目&#xff0c;以推动技术创新和实现协作共赢。你如何看待当前开源项目的发展趋势&#xff1f;…
阅读更多...
SpringCache介绍

SpringCache介绍

SpringCache是Spring提供的缓存框架。提供了基于注解的缓存功能。 SpringCache提供了一层抽象&#xff0c;底层可以切换不同的缓存实现&#xff08;只需要导入不同的Jar包即可&#xff09;&#xff0c;如EHCache&#xff0c;Caffeine&#xff0c;Redis。 2个重要依赖已经导入&a…
阅读更多...
Vue 3中常用的生命周期钩子和监听器的详细分析

Vue 3中常用的生命周期钩子和监听器的详细分析

目录 前言1. onMounted2. watch3. computed4. 其他 前言 分析常用的一些生命周期钩子和监听器可以帮助我们在组件中处理数据加载、状态变化和响应式更新 1. onMounted 生命周期钩子&#xff0c;在组件挂载后执行。它适合用于初始化数据加载或执行一次性的操作 <template…
阅读更多...
简单一阶滤波器设计：matlab和C实现

简单一阶滤波器设计：matlab和C实现

一、简单一阶滤波器的模型 二、示例 得： y(n)-0.9y(n-1)=x(n)+0.05x(n-1)，即：y(n)=0.9y(n-1)+x(n)+0.05x(n-1) 已知：，并且有： A. 假设输入序列有N=100个点 B. 系统初始状态为0，即y(-1)=0 C. 输入序列是因果序列，
阅读更多...
分析AI是在帮助开发者还是取代他们

分析AI是在帮助开发者还是取代他们

AI在软件开发中起到了辅助作用&#xff0c;帮助开发者提高生产效率和质量。它可以通过代码生成、错误检测和自动化测试等功能&#xff0c;加速开发流程&#xff0c;减少人为错误并改善软件质量。AI工具可以解放开发者的时间和精力&#xff0c;让他们可以更专注于解决复杂问题和…
阅读更多...
【OpenRecall】超越 Windows Recall，OpenRecall 为你的隐私和自由而战

【OpenRecall】超越 Windows Recall，OpenRecall 为你的隐私和自由而战

引言 随着 Windows 11 的 Recall 功能推出&#xff0c;我们看到了数字记忆回顾的全新可能性。然而&#xff0c;这项功能受限于特定的硬件——Copilot 认证的 Windows 硬件&#xff0c;并且仅在 Windows 平台上可用。对于追求隐私和硬件灵活性的用户来说&#xff0c;这无疑是个…
阅读更多...
长按加速- 解决react - setInterval下无法更新问题

长按加速- 解决react - setInterval下无法更新问题

最开始直接setInterval里&#xff0c;useState硬写&#xff0c;发现更新不&#xff0c;固定值 换let&#xff0c;发现dom更新不了 正确做法是用ref 并且pc端可以长按的&#xff0c;只是要用onTouchStart&#xff0c;不要用onMouseDown onTouchStart{handleMouseDown} onTou…
阅读更多...
最新文章

Copyright @ 2022~2023