Document

--- theme: orange --- ## 大文件上传（具体代码在最后） ### 前景提要在工作中，经常会遇到上传文件的功能，但是当文件体积大时，如果使用把该文件直接在一个请求体中提交，会出现一些问题，以nginx为例： - 其默认允许1MB以内的文件 - 超过1MB的文件，需要设置`client_max_body_size`放开体积限制但是这样会存在一个问题，就是如果上传的文件体积很大，就会出现一些问题，最明显的问题是： > 服务器的存储和网络带宽压力都会非常大 ![1.webp](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3260652672794ace863f27cbb64fc69d~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=362&h=260&s=7590&e=webp&b=fbfbfb) 当服务器、产品、用户忍不了时，就需要对大文件上传进行优化。 ### 1、大文件切片上传 #### 逻辑梗概 - 将大文件分割成多个文件块 - 逐个上传文件块 - 服务端将文件块顺序合并成完整文件 #### 优势分析 1. 减轻服务器压力：如果一次性上传大文件，服务器的存储和网络带宽压力都会非常大，而通过切片，可以将这些压力分散到多个小文件中，减轻服务器的压力。 2. 断点续传、错误重试：因为大文件被肢解了，如果因为一些原因中断、错误了，已经上传的部分就不用再重新上传了，只需要把后续的传上就好了。 #### 前端部分 ##### 1.1 切文件（前端） ##### 1.2 判定切片是否完成上传完成（前端） - 客户端记录切片的上传状态，只需要上传未成功的切片 ##### 1.3 断点、错误续传（前端） - 客户端上传文件时，记录已上传的切片位置 - 下次上传时，根据记录的位置，继续上传 #### 后端部分 ##### 1.1 收切片、存切片 - 将相关切片保存在目标文件夹 ##### 1.2 合并切片 - 服务端根据切片的顺序，将切片合并成完整文件 ##### 1.3 文件是否存在校验 - 服务端根据文件Hash值、文件名，校验该文件是否已经上传 #### 代码实现 ##### 1、搭建基础项目 ###### 服务器（基于express） ```js const express = require('express') const app = express() app.listen(3000, () => { console.log('服务已运行：http://localhost:3000'); }) ``` ###### 前端 > 基础页面 ```html Document ``` > 引入资源 ```html ``` > operate.js ```js // 获取文件域 const fileEle = document.querySelector("#file"); const uploadButton = document.querySelector("#upload"); const continueButton = document.querySelector("#continue"); uploadButton.addEventListener("click", async () => { console.log("点击了上传按钮") }) continueButton.addEventListener('click', async () => { console.log("点击了继续上传按钮") }) ``` ##### 3、静态资源托管（server） ```js app.use(express.static('static')) ``` ##### 4、上传接口 ###### 搭建上传接口（server） > 使用body-parser中间价解析请求体 ```js // 导入中间件 const bodyParser = require('body-parser') // 使用中间件 // 处理URL编码格式的数据 app.use(bodyParser.urlencoded({ extended: false })); // 处理JSON格式的数据 app.use(bodyParser.json()); ``` > 上传接口 ```js app.post('/upload', (req, res) => { res.send({ msg: '上传成功', success: true }) }) ``` ###### 测试接口（前端） ```js // 单个文件上传 const uploadHandler = async (file) => { fetch('http://localhost:3000/upload', { method: "POST", headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ fileName: '大文件', }), }) } uploadButton.addEventListener("click", async (e) => { uploadHandler() }) ``` ##### 5、文件上传接口存储文件（server） > 使用multer中间件处理上传文件 >> 设置**uploadFiles**文件夹为文件存储路径 ```js const multer = require('multer') const storage = multer.diskStorage({ destination: function (req, file, cb) { cb(null, './uploadFiles'); }, }); const upload = multer({ storage }) app.post('/upload', upload.single('file'), (req, res) => { }) ``` > 测试 ```js // 单个文件上传 const uploadHandler = async (file) => { let fd = new FormData(); fd.append('file', file); fetch('http://localhost:3000/upload', { method: "POST", body: fd }) } uploadButton.addEventListener("click", async () => { let file = fileEle.files[0]; uploadHandler(file) }) ``` ###### 6、文件切片 > 注意 >> 假设切片大小为1M >> 保存切片顺序（为了合成大文件时正确性） >> 上传状态（为了断点续传、前端显示进度条） ```js // 使用单独常量保存预设切片大小 1MB const chunkSize = 1024 * 1024 * 1; // 文件切片 const createChunks = (file) => { // 接受一个文件对象，要把这个文件对象切片，返回一个切片数组 const chunks = []; // 文件大小.slice(开始位置,结束位置) let start = 0; let index = 0; while (start < file.size) { let curChunk = file.slice(start, start + chunkSize); chunks.push({ file: curChunk, uploaded: false, chunkIndex: index, }); index++; start += chunkSize; } return chunks; } ``` > 测试文件切片函数 ```js // 存储当前文件所有切片 let chunks = []; uploadButton.addEventListener("click", async () => { let file = fileEle.files[0]; chunks = createChunks(file); console.log(chunks); }) ``` > 注意：将来要把这些切片全部都上传到服务器，并且最后需要把这些切片合并成一个文件，且要做出文件秒传功能，需要保留当前文件的hash值和文件名，以辨别文件和合并文件。在页面中引入spark-md5.js ```html ``` 获取文件Hash值 ```js const getHash = (file) => { return new Promise((resolve) => { const fileReader = new FileReader(); fileReader.readAsArrayBuffer(file); fileReader.onload = function (e) { let fileMd5 = SparkMD5.ArrayBuffer.hash(e.target.result); resolve(fileMd5); } }); } ``` 把文件的hash值保存在切片信息中 ```js // 文件hash值 let fileHash = ""; // 文件名 let fileName = ""; // 创建切片数组 const createChunks = (file) => { // 接受一个文件对象，要把这个文件对象切片，返回一个切片数组 const chunks = []; // 文件大小.slice(开始位置,结束位置) let start = 0; let index = 0; while (start < file.size) { let curChunk = file.slice(start, start + chunkSize); chunks.push({ file: curChunk, uploaded: false, fileHash: fileHash, chunkIndex: index, }); index++; start += chunkSize; } return chunks; } // 上传执行函数 const uploadFile = async(file) => { // 设置文件名 fileName = file.name; // 获取文件hash值 fileHash = await getHash(file); chunks = createChunks(file); console.log(chunks); } ``` ###### 7、上传逻辑修改前端部分 > 单个文件上传函数修改： >> 插入文件名、文件Hash值、切片索引 >> >> 上传成功之后修改状态标识（可用于断点续传、上传进度回显） ```js // 单个文件上传 const uploadHandler = (chunk) => { return new Promise(async (resolve, reject) => { try { let fd = new FormData(); fd.append('file', chunk.file); fd.append('fileHash', chunk.fileHash); fd.append('chunkIndex', chunk.chunkIndex); let result = await fetch('http://localhost:3000/upload', { method: 'POST', body: fd }).then(res => res.json()); chunk.uploaded = true; resolve(result) } catch (err) { reject(err) } }) } ``` > 批量上传切片 >> 限制并发数量（减轻服务器压力） ```js // 批量上传切片 const uploadChunks = (chunks, maxRequest = 6) => { return new Promise((resolve, reject) => { if (chunks.length == 0) { resolve([]); } let requestSliceArr = [] let start = 0; while (start < chunks.length) { requestSliceArr.push(chunks.slice(start, start + maxRequest)) start += maxRequest; } let index = 0; let requestReaults = []; let requestErrReaults = []; const request = async () => { if (index > requestSliceArr.length - 1) { resolve(requestReaults) return; } let sliceChunks = requestSliceArr[index]; Promise.all( sliceChunks.map(chunk => uploadHandler(chunk)) ).then((res) => { requestReaults.push(...(Array.isArray(res) ? res : [])) index++; request() }).catch((err) => { requestErrReaults.push(...(Array.isArray(err) ? err : [])) reject(requestErrReaults) }) } request() }) } ``` > 抽离上传操作 ```js // 文件上传 const uploadFile = async (file) => { // 设置文件名 fileName = file.name; // 获取文件hash值 fileHash = await getHash(file); // 获取切片 chunks = createChunks(file); try { await uploadChunks(chunks) } catch (err) { return { mag: "文件上传错误", success: false } } } ``` 后端部分 > 修改上传接口，增加功能 >> 使用一个文件Hash值同名的文件夹保存所有切片 >> >> 这里使用了node内置模块path处理路径 >> >> 使用fs-extra第三方模块处理文件操作 ```js const path = require('path') const fse = require('fs-extra') app.post('/upload', upload.single('file'), (req, res) => { const { fileHash, chunkIndex } = req.body; // 上传文件临时目录文件夹 let tempFileDir = path.resolve('uploadFiles', fileHash); // 如果当前文件的临时文件夹不存在，则创建该文件夹 if (!fse.pathExistsSync(tempFileDir)) { fse.mkdirSync(tempFileDir) } // 如果无临时文件夹或不存在该切片，则将用户上传的切片移到临时文件夹里 // 如果有临时文件夹并存在该切片，则删除用户上传的切片（因为用不到了） // 目标切片位置 const tempChunkPath = path.resolve(tempFileDir, chunkIndex); // 当前切片位置（multer默认保存的位置） let currentChunkPath = path.resolve(req.file.path); if (!fse.existsSync(tempChunkPath)) { fse.moveSync(currentChunkPath, tempChunkPath) } else { fse.removeSync(currentChunkPath) } res.send({ msg: '上传成功', success: true }) }) ``` ###### 8、合并文件编写合并接口（server） > 合并成的文件名为 `文件哈希值.文件扩展名` >> 所以需要传入文件Hash值、文件名 ```js app.get('/merge', async (req, res) => { const { fileHash, fileName } = req.query; res.send({ msg: `Hash：${fileHash},文件名：${fileName}`, success: true }); }) ``` 请求合并接口（前端） > 封装合并请求函数 ```js // 合并分片请求 const mergeRequest = (fileHash, fileName) => { return fetch(`http://localhost:3000/merge?fileHash=${fileHash}&fileName=${fileName}`, { method: "GET", }).then(res => res.json()); }; ``` > 在切片上传完成后，调用合并接口 ```js // 文件上传 const uploadFile = async (file) => { // 设置文件名 fileName = file.name; // 获取文件hash值 fileHash = await getHash(file); // 获取切片 chunks = createChunks(file); try { await uploadChunks(chunks) await mergeRequest(fileHash, fileName) } catch (err) { return { mag: "文件上传错误", success: false } } } ``` > 合并接口逻辑 >> 1、根据文件Hash值，找到所有切片 ```js app.get('/merge', async (req, res) => { const { fileHash, fileName } = req.query; // 最终合并的文件路径 const filePath = path.resolve('uploadFiles', fileHash + path.extname(fileName)); // 临时文件夹路径 let tempFileDir = path.resolve('uploadFiles', fileHash); // 读取临时文件夹，获取所有切片 const chunkPaths = fse.readdirSync(tempFileDir); console.log('chunkPaths：', chunkPaths); res.send({ msg: "合并成功", success: true }); }) ``` > 合并接口逻辑 >> 2、遍历获取所有切片路径数组，根据路径找到切片，合并成一个文件，删除原有文件夹 ```js app.get('/merge', async (req, res) => { const { fileHash, fileName } = req.query; // 最终合并的文件路径 const filePath = path.resolve('uploadFiles', fileHash + path.extname(fileName)); // 临时文件夹路径 let tempFileDir = path.resolve('uploadFiles', fileHash); // 读取临时文件夹，获取所有切片 const chunkPaths = fse.readdirSync(tempFileDir); console.log('chunkPaths：', chunkPaths); // 将切片追加到文件中 let mergeTasks = []; for (let index = 0; index < chunkPaths.length; index++) { mergeTasks.push(new Promise((resolve) => { // 当前遍历的切片路径 const chunkPath = path.resolve(tempFileDir, index + ''); // 将当前遍历的切片切片追加到文件中 fse.appendFileSync(filePath, fse.readFileSync(chunkPath)); // 删除当前遍历的切片 fse.unlinkSync(chunkPath); resolve(); })) } await Promise.all(mergeTasks); // 等待所有切片追加到文件后，删除临时文件夹 fse.removeSync(tempFileDir); res.send({ msg: "合并成功", success: true }); }) ``` ###### 10、断点续传 > 封装`continueUpload`方法 >> 在`continueUpload`方法中，只上传 `uploaded` 为false的切片 >> >> 修改后此功能对用户来说即是黑盒，用户只需要重复调用`continueUpload`方法即可 ```js // 文件上传 const continueUpload = async (file) => { if(chunks.length == 0 || !fileHash || !fileName){ return; } try { await uploadChunks(chunks.filter(chunk => !chunk.uploaded)) await mergeRequest(fileHash, fileName) } catch (err) { return { mag: "文件上传错误", success: false } } } ``` ### 2、大文件秒传 #### 逻辑梗概 - 客户端上传文件时，先提交文件的哈希值， - 服务端根据哈希值查询文件是否已经上传，如果已上传，则直接返回已上传状态 - 客户端收到已上传状态后，直接跳过上传过程 #### 优势分析 - 提高上传效率：秒传可以提高上传效率，因为文件已经在上传过程中被上传过了，直接返回已上传状态，省要再次上传，提高效率。 #### 代码实现 ###### 校验接口，校验是否已经存在目标文件 > 逻辑：根据文件Hash值和文件名组成 “文件Hash.文件扩展名” ，以保证文件名唯一 ```js app.get('/verify', (req, res) => { const { fileHash, fileName } = req.query; const filePath = path.resolve('uploadFiles', fileHash + path.extname(fileName)); const exitFile = fse.pathExistsSync(filePath); res.send({ exitFile }) }) ``` > 校验函数 ```js // 校验文件、文件分片是否存在 const verify = (fileHash, fileName) => { return fetch(`http://localhost:3000/verify?fileHash=${fileHash}&fileName=${fileName}`, { method: "GET", }).then(res => res.json()); }; // 文件上传 const uploadFile = async (file) => { // 设置文件名 fileName = file.name; // 获取文件hash值 fileHash = await getHash(file); // 校验是否已经上传该文件 let { exitFile } = await verify(fileHash, fileName); if (exitFile) { return { mag: "文件已上传", success: true } } // 获取切片 chunks = createChunks(file); try { await uploadChunks(chunks.filter(chunk => !chunk.uploaded)) await mergeRequest(fileHash, fileName) } catch (err) { return { mag: "文件上传错误", success: false } } } ``` ### 3、提取为公共方法封装 > 编写 **bigFileUpload.js** 文件，暴露`uploadFile`和`continueUpload` ```js // bigFileUpload.js export default { uploadFile, continueUpload } ``` 使用 > 导入资源并调用 ```js import bigUpload from './bigFileUpload.js' uploadButton.addEventListener("click", async () => { let file = fileEle.files[0]; bigUpload.uploadFile(file) }) continueButton.addEventListener('click', async () => { bigUpload.continueUpload() }) ``` ### 4、可优化 > 前端： >> 封装形式可优化，采用类的方式封装，以保证数据的独立性、可定制性 >> >> 切片Hash的计算可以通过抽样切片的方式来进行 >> >> ... >> > 后端： >> 文件Hash校验可增加用户ip地址以保证文件唯一性 >> >> 待合并项可定时删除 >> >> ... 欢迎大家补充！ ### 资源 [express](http://expressjs.jser.us/) [body-parser](https://www.npmjs.com/package/body-parser) [multer](https://www.npmjs.com/package/multer) [Blob-slice](https://developer.mozilla.org/zh-CN/docs/Web/API/Blob/slice) [spark-md5](https://github.com/satazor/js-spark-md5?tab=readme-ov-file#readme) ### 代码放在最后 > 项目结构 ``` - static -- js ---bigFileUpload.js ---operate.js ---spark-md5.js -- index.html - uploadFiles - app.js ``` > 后端服务 - app.js ```js const express = require('express') const multer = require('multer') const path = require('path') const fse = require('fs-extra') const app = express() app.use(express.static('static')) // 导入中间件 const bodyParser = require('body-parser') // 使用中间件 // 处理URL编码格式的数据 app.use(bodyParser.urlencoded({ extended: false })); // 处理JSON格式的数据 app.use(bodyParser.json()); const storage = multer.diskStorage({ destination: function (req, file, cb) { cb(null, './uploadFiles'); }, }); const upload = multer({ storage }) app.post('/upload', upload.single('file'), (req, res) => { const { fileHash, chunkIndex } = req.body; // 上传文件临时目录文件夹 let tempFileDir = path.resolve('uploadFiles', fileHash); // 如果当前文件的临时文件夹不存在，则创建该文件夹 if (!fse.pathExistsSync(tempFileDir)) { fse.mkdirSync(tempFileDir) } // 如果无临时文件夹或不存在该切片，则将用户上传的切片移到临时文件夹里 // 如果有临时文件夹并存在该切片，则删除用户上传的切片（因为用不到了） // 目标切片位置 const tempChunkPath = path.resolve(tempFileDir, chunkIndex); // 当前切片位置（multer默认保存的位置） let currentChunkPath = path.resolve(req.file.path); if (!fse.existsSync(tempChunkPath)) { fse.moveSync(currentChunkPath, tempChunkPath) } else { fse.removeSync(currentChunkPath) } res.send({ msg: '上传成功', success: true }) }) app.get('/merge', async (req, res) => { const { fileHash, fileName } = req.query; // 最终合并的文件路径 const filePath = path.resolve('uploadFiles', fileHash + path.extname(fileName)); // 临时文件夹路径 let tempFileDir = path.resolve('uploadFiles', fileHash); // 读取临时文件夹，获取所有切片 const chunkPaths = fse.readdirSync(tempFileDir); // 将切片追加到文件中 let mergeTasks = []; for (let index = 0; index < chunkPaths.length; index++) { mergeTasks.push(new Promise((resolve) => { // 当前遍历的切片路径 const chunkPath = path.resolve(tempFileDir, index + ''); // 将当前遍历的切片切片追加到文件中 fse.appendFileSync(filePath, fse.readFileSync(chunkPath)); // 删除当前遍历的切片 fse.unlinkSync(chunkPath); resolve(); })) } await Promise.all(mergeTasks); // 等待所有切片追加到文件后，删除临时文件夹 fse.removeSync(tempFileDir); res.send({ msg: "合并成功", success: true }); }) app.get('/verify', (req, res) => { const { fileHash, fileName } = req.query; const filePath = path.resolve('uploadFiles', fileHash + path.extname(fileName)); const exitFile = fse.pathExistsSync(filePath); res.send({ exitFile }) }) app.listen(3000, () => { console.log('服务已运行：http://localhost:3000'); }) ``` > 前端业务 - 页面 index.html ```html Document ``` - bigFileUpload.js ```js // 存储当前文件所有切片 let chunks = []; // 文件hash值 let fileHash = ""; // 文件名 let fileName = ""; // 使用单独常量保存预设切片大小 1MB const chunkSize = 1024 * 10; // 创建切片数组 const createChunks = (file) => { // 接受一个文件对象，要把这个文件对象切片，返回一个切片数组 const chunks = []; // 文件大小.slice(开始位置,结束位置) let start = 0; let index = 0; while (start < file.size) { let curChunk = file.slice(start, start + chunkSize); chunks.push({ file: curChunk, uploaded: false, fileHash: fileHash, chunkIndex: index, }); index++; start += chunkSize; } return chunks; } // 获取Hash值 const getHash = (file) => { return new Promise((resolve) => { const fileReader = new FileReader(); fileReader.readAsArrayBuffer(file); fileReader.onload = function (e) { let fileMd5 = SparkMD5.ArrayBuffer.hash(e.target.result); resolve(fileMd5); } }); } // 校验文件、文件分片是否存在 const verify = (fileHash, fileName) => { return fetch(`http://localhost:3000/verify?fileHash=${fileHash}&fileName=${fileName}`, { method: "GET", }).then(res => res.json()); }; // 单个文件上传 const uploadHandler = (chunk) => { return new Promise(async (resolve, reject) => { try { let fd = new FormData(); fd.append('file', chunk.file); fd.append('fileHash', chunk.fileHash); fd.append('chunkIndex', chunk.chunkIndex); let result = await fetch('http://localhost:3000/upload', { method: 'POST', body: fd }).then(res => res.json()); chunk.uploaded = true; resolve(result) } catch (err) { reject(err) } }) } // 批量上传切片 const uploadChunks = (chunks, maxRequest = 6) => { return new Promise((resolve, reject) => { if (chunks.length == 0) { resolve([]); } let requestSliceArr = [] let start = 0; while (start < chunks.length) { requestSliceArr.push(chunks.slice(start, start + maxRequest)) start += maxRequest; } let index = 0; let requestReaults = []; let requestErrReaults = []; const request = async () => { if (index > requestSliceArr.length - 1) { resolve(requestReaults) return; } let sliceChunks = requestSliceArr[index]; Promise.all( sliceChunks.map(chunk => uploadHandler(chunk)) ).then((res) => { requestReaults.push(...(Array.isArray(res) ? res : [])) index++; request() }).catch((err) => { requestErrReaults.push(...(Array.isArray(err) ? err : [])) reject(requestErrReaults) }) } request() }) } // 上传文件 const uploadFile = async (file) => { // 设置文件名 fileName = file.name; // 获取文件hash值 fileHash = await getHash(file); // 校验是否已经上传该文件 let { exitFile } = await verify(fileHash, fileName); if (exitFile) { return { mag: "文件已上传", success: true } } // 获取切片 chunks = createChunks(file); try { await uploadChunks(chunks.filter(chunk => !chunk.uploaded)) await mergeRequest(fileHash, fileName) } catch (err) { return { mag: "文件上传错误", success: false } } } // 文件续传 const continueUpload = async (file) => { if (chunks.length == 0 || !fileHash || !fileName) { return; } try { await uploadChunks(chunks.filter(chunk => !chunk.uploaded)) await mergeRequest(fileHash, fileName) } catch (err) { return { mag: "文件上传错误", success: false } } } // 合并分片请求 const mergeRequest = (fileHash, fileName) => { return fetch(`http://localhost:3000/merge?fileHash=${fileHash}&fileName=${fileName}`, { method: "GET", }).then(res => res.json()); }; // bigFileUpload.js export default { uploadFile, continueUpload } ``` - operate.js ```js // 获取文件域 const fileEle = document.querySelector("#file"); const uploadButton = document.querySelector("#upload"); const continueButton = document.querySelector("#continue"); import bigUpload from './bigFileUpload.js' uploadButton.addEventListener("click", async () => { let file = fileEle.files[0]; bigUpload.uploadFile(file) }) continueButton.addEventListener('click', async () => { bigUpload.continueUpload() }) ```