文件分片上传

--- theme: devui-blue highlight: atelier-heath-light --- 产品：什么？？？上传一张不到三十兆的图片要将近一分钟，不知道的还以为系统挂了呢，能不能搞，能不能优化。前端：这个得问后端后端：上传接口都给你们前端了，你们就不能做个分片上传啊工作中偶尔遇到这种扯淡的后端，连文件分片上传和文件普通上传的实现逻辑都没搞清楚，就开始甩锅给前端，这个时候，前端就应该要了解分片上传和文件普通上传的区别，就能让你有理有据的去怼后端 ![](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/7e7cd34cb457450fad1fd65ece62d6b0~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6LW36aOO5LqGaQ==:q75.awebp?rk3s=f64ab15b&x-expires=1775003771&x-signature=is%2Fw9ilf9soRjf2jNfeJJszJy6A%3D) 前端：通用的上传接口怎么处理文件分片和文件合并，你不会连分片需要合并都不知道吧？后端：我们用的是阿里云OSS，合并什么？前端：不会吧，难道你连阿里云OSS的分片上传方案都不知道吗！！！回去多看看书吧！！！ ![](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/0852c8d666ae45dbbd1ff6fd116da2fb~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6LW36aOO5LqGaQ==:q75.awebp?rk3s=f64ab15b&x-expires=1775003771&x-signature=Xx6xfX%2Bjblt8YbEiiLZ4%2BvLPIFc%3D) ### 文件分片上传与合并 **一、前端：** > 前端工作内容： > > 1、对文件进行分片并上传分片 > > 2、通知服务端合并分片文件 **slice方法进行分片** 前端对文件分片的关键点就在**slice**方法，方法第一个参数表示开始截取的位置，第二个参数表示截取结束的位置 > 例如有一个文件对象**fileObj**，文件大小为2MB，现在对这个文件进行分片，每一段大小1MB > > let file1 = fileObj.slice(0, 1024) > let file2 = fileObj.slice(1024, 2048) > > **file1**和**file2**就是**fileObj**文件的分片文件，将**file1**和**file2**合并就是完整的**fileObj**文件 **前端完整代码如下：** 文件分片上传

> 前端主要逻辑：前端获取一个hash做为单次上传的标识（正常通过服务端获取，以确保唯一性），对文件进行分片并序列化，然后进行所有分片文件的上传，同时传递对应hash以及分片的序列号，最后，所有分片上传成功后调用文件合并接口。 **服务端使用node实现：** > 服务端工作内容： > > 接收前端上传的每一段分片并序列化 > > 当前端调用合并接口时，将当前文件所有分片序列化并合并 **完整代码如下：** const express = require("express"); const multer = require("multer"); const fs = require("fs"); const path = require("path"); const cors = require("cors"); const app = express(); app.use(cors()); app.use(express.json()); // 上传目录 const UPLOAD_DIR = path.resolve(__dirname, "upload"); // 确保上传目录存在 if (!fs.existsSync(UPLOAD_DIR)) { fs.mkdirSync(UPLOAD_DIR); } // 修改multer配置 const storage = multer.diskStorage({ destination: (req, file, cb) => { const fileHash = req.query.fileHash; const chunkDir = path.resolve(UPLOAD_DIR, fileHash); if (!fs.existsSync(chunkDir)) { fs.mkdirSync(chunkDir); } cb(null, chunkDir); }, filename: (req, file, cb) => { let query = req.query; // 使用fileHash和index作为文件名分片 cb(null, `${query.fileHash}-${query.index}`); }, }); // 创建一个普通上传中间件来解析字段 const upload = multer({ storage, }); // 上传分片 app.post("/upload", upload.single("file"), (req, res) => { res.json({ code: 200, success: true, message: "分片上传成功", }); }); // 合并分片 app.post("/upload/merge", async (req, res) => { const { fileHash, fileName, total } = req.body; const filePath = path.resolve(UPLOAD_DIR, `${fileHash}-${fileName}`); const chunkDir = path.resolve(UPLOAD_DIR, fileHash); try { // 检查分片是否完整 let chunks = fs.readdirSync(chunkDir); if (chunks.length !== total) { return res.status(400).json({ success: false, message: "分片数量不匹配", }); } // 按照索引排序 chunks = chunks.sort((a, b) => { const aIndex = parseInt(a.split("-").pop()); const bIndex = parseInt(b.split("-").pop()); return aIndex - bIndex; }); let writeStream = fs.createWriteStream(filePath); // 合并文件 await Promise.all( chunks.map((chunk, index) => { const chunkPath = path.resolve(chunkDir, chunk); return new Promise((resolve) => { writeStream.write(fs.readFileSync(chunkPath), () => { resolve(); }); }); }) ); writeStream.end(); // 删除临时目录 // fs.rmdirSync(chunkDir); res.json({ code: 200, success: true, message: "合并成功", }); } catch (err) { res.status(500).json({ code: 500, success: false, message: "合并失败", }); } }); // 启动服务器 const PORT = 3000; app.listen(PORT, () => { console.log(`服务器已启动，访问 http://localhost:${PORT}`); }); > 服务端主要逻辑： > > 0. 上传分片接口：通过前端传递的参数和文件流，**multer**插件将每一段分片存储在同一个hash目录下，并且每一段分片命名上通过 **"-"** 拼接序列号 > 1. 合并文件接口：通过前端参数，对相应hash目录下的分片进行排序，创建一个文件流，并将分片按顺序写入到这个文件流中，最后返回文件的访问链接 ### 简单分析上述逻辑 1、获取一个唯一hash，单次文件上传对应一个hash（通常后端接口获取） 2、通过**slice**方法对**File**对象进行分割（分片），设置一个**size**大小，每段最多**size**大小 3、上传所有分片文件，并传递相应参数，如：hash、index（文件顺序）...... 4、当所有分片上传成功，合并文件 ### 实际场景工作当中一般不会这样实现服务端，一般文件存储都会用流行的**OSS**存储服务，并不会自己手动去实现这些功能，服务端只需要按要求调用**OSS**服务提供的接口即可，即使是分片上传功能，**OSS**服务也是有提供对应的接口方案，但是，我们应该要了解分片是怎样进行存储，又是怎么合并成一个文件的。 ### 最后分片上传虽然能提升上传的速度，但也是受限于带宽的，分片处理方案只会更充分利用服务器的带宽，但如果服务器带宽就有限，那么即使是分片上传也提升不了太大上传速度。