node实现大文件切片上传的方法

切片上传定义

文件切片上传，也称为分片上传，是一种处理大文件上传的有效方法。该方法通过将大文件分割成多个较小的部分（即切片或分片），然后分别上传这些切片到服务器，最后在服务器上将这些切片合并成原始文件

背景与需求

在Web开发中，上传大文件时常常会遇到各种问题，如连接超时、网络中断等，这些都可能导致上传失败。为了提升大文件上传的效率和成功率，文件切片上传技术应运而生。通过将大文件分割成多个小切片进行上传，可以有效减少单次上传的数据量，降低上传失败的风险，并提高上传速度。

工作原理

前端将用户上传的文件按照设定大小进行切片，每一个切片都会发送一次切片请求，等所有的切片请求都完成之后，再执行一次切换合并的请求，将各个切片进行拼接存储。

可拓展

1、切片的顺序可能是乱序的，需要在发送切片请求之前，先按照特定的规则进行排序，特定规则可以是从自定义的切片文件名入手
2、前端可以对切片上传进行监听，当某个切片上传失败时，需要触发重试机制上传该切片，可以设置重试次数或者重试时间间隔

优点与应用场景

提升上传效率：通过并行上传多个切片，可以显著提高大文件的上传速度
降低上传失败风险：即使某个切片上传失败，也只需要重新上传该切片，而不需要重新上传整个文件
支持断点续传：结合前端记录的上传进度和状态信息，可以实现断点续传功能，即在网络中断后可以从上次中断的位置继续上传

效果

启动本地服务器

发送请求

切片数据

最终合并的数据

代码

<body></body><input type="file" id="file">
</body><script>const file = document.getElementById('file');file.addEventListener('change', (event)=>{const fileInfo = event.target.files[0]; // 获取文件信息console.log(fileInfo, 'fileInfo')const chunks = chunkFun(fileInfo) // 获取切片数组uploadFile(chunks, fileInfo.name) // 上传切片})const chunkFun = (fileInfo, size = 1024 * 1024 * 4) => { // size-自定义切片大小，这里是4Mconst chunks = [];for(let i=0; i<fileInfo.size; i+=size){chunks.push(fileInfo.slice(i, i + size))}return chunks}const uploadFile = (chunks, fileName) =>{const List = [];for(let i=0; i<chunks.length; i++){const formData = new FormData();formData.append('index', i);formData.append('total', chunks.length);formData.append('fileName', 'cheney');formData.append('file', chunks[i]);// 将每一个分片的fetch存在List数组中List.push(fetch('http://127.0.0.1:8080/up', {method: 'POST',body: formData}))}// 通过promise.all 并发发送请求Promise.all(List).then(res=>{fetch('http://127.0.0.1:8080/merge', {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify({fileName: fileName})}).then(res=>{console.log(res)})})}
</script>

node.js

// import express from 'express'
// import multer from 'multer'
// import cors from 'cors'
// import fs from 'node:fs'
// import path from 'node:path'
const express = require('express');
const multer = require('multer');
const cors = require('cors');
const fs = require('fs');
const path = require('path');const storage = multer.diskStorage({destination: (req, file, cb) => {cb(null, 'chunk/uploads/') // 分片存储目录},filename: (req, file, cb) => {cb(null, `${req.body.index}-${req.body.fileName}`) // 分片文件名}
})
const upload = multer({ storage })
const app = express()app.use(cors())
app.use(express.json())app.post('/up', upload.single('file'), (req, res) => {res.send('ok')
})app.post('/merge', async (req, res) => {const uploadPath = './chunk/uploads'let files = fs.readdirSync(path.join(process.cwd(), uploadPath)) // 获取所有的分片数据files = files.sort((a, b) => a.split('-')[0] - b.split('-')[0]) // 将分片按照文件名进行排序const writePath = path.join(process.cwd(), uploadPath, `${req.body.fileName}`) // 生成新的文件路径files.forEach((item) => {fs.appendFileSync(writePath, fs.readFileSync(path.join(process.cwd(), uploadPath, item))) // 读取分片信息，追加到新文件路径尾部fs.unlinkSync(path.join(process.cwd(), uploadPath, item)) // 将读取过的分片进行删除})res.send('ok')
})app.listen(8080, () => {console.log('Server is running on port 8080')
})