海淀区网站搭建,旅行社网站规划与建设的流程,办公室装修设计创意图,天堂呦呦在前端的文件上传功能中#xff0c;只要请求头里定义 content-type 为 multipart/form-data#xff0c;内容就会以下面形式传递到服务端#xff0c;接着服务器再按照multipart/form-data的格式去提取数据 获取文件数据但是当文件体积很大时 就会出现一个问题 文件越大 请求的…在前端的文件上传功能中只要请求头里定义 content-type 为 multipart/form-data内容就会以下面形式传递到服务端接着服务器再按照multipart/form-data的格式去提取数据 获取文件数据但是当文件体积很大时 就会出现一个问题 文件越大 请求的时间会越长会导致产品的体验很不好。所以大文件上传时 我们要对齐进行优化 例如把1G的大文件 分割成10个100M的小文件接着并行上传这些文件服务端接收到10个文件之后再合并这10个小文件 成为一个大文件 这就是大文件分片上传的方案。
1、前端分片大文件方法 在游览器中 Blob 有着一个slice方法 可以截取特定范围的数据 File就是Blob中的一种,我们在选择文件之后可以通过slice 对 File 分片 地址https://developer.mozilla.org/zh-CN/docs/Web/API/Blob/slice
2、后端合并分片文件的方法 在前端分片发送文件到后端全接收之后在后端我们可以使用fs 的 createWriteStream 方法把每个分片按照不同位置写入文件 地址https://nodejs.cn/api-v12/fs.html#fscreatewritestreampath-options
接下来我们创建项目来测试一下
nest new large-file-sharding-upload安装 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: ArrayExpress.Multer.File, Body() body) {console.log(body, body);console.log(files, files);}
}接着启动服务
pnpm run start:dev可以看到根目录下生成了uploads 目录然后我们在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 langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title!-- 引入axios库用于发送HTTP请求 --script srchttps://unpkg.com/axios0.24.0/dist/axios.min.js/script
/headbodyinput idfileInput typefile /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游览器访问http://127.0.0.1:8080/ 接着我们上传个文件 这里我上传的文件大小为20多kb 我的切片是20kb分片一个 所以一共会分片成2给可以看到服务端接收了2给分片接下来 我们在服务端实现接收到服务端的数据之后 实现将同一个文件的分片 放置到单独目录中
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: ArrayExpress.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个文件我们在上传的时候 给文件名增加一个随机的字符串 防止重复
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title!-- 引入axios库用于发送HTTP请求 --script srchttps://unpkg.com/axios0.24.0/dist/axios.min.js/script
/headbodyinput idfileInput typefile /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 langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title!-- 引入axios库用于发送HTTP请求 --script srchttps://unpkg.com/axios0.24.0/dist/axios.min.js/script
/headbodyinput idfileInput typefile /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可以看到文件分片上传之后 会执行 merge 接口 合并生成了下面文件
