平常业务需求：上传图片、excel等，毕竟几m的大小可以很快就上传到服务器。
针对于上传视频等大文件几百m或者几g的大小，就需要等待比较长的时间。
这就产生了对应的解决方法，对于大文件上传时的暂停、断网、网络较差的情况下， 使用切片+断点续传就能够很好的应对上述的情况
方案分析切片
就是对上传视频进行切分，具体操作为：file.slice(start,end)：返回新的blob对象拷贝blob的起始字节拷贝blob的结束字节断点续传
每次切片上传之前，请求服务器接口，读取相同文件的已上传切片数上传的是新文件，服务端则返回0，否则返回已上传切片数【推荐学习：《nodejs 教程》】
具体解决流程该demo提供关键点思路及方法，其他功能如：文件限制，lastmodifieddate校验文件重复性，缓存文件定期清除等功能扩展都可以在此代码基础上添加。
html<input class="video" type="file" /><button type="submit" onclick="handlevideo(event, '.video', 'video')"> 提交</button>
scriptlet count = 0; // 记录需要上传的文件下标const handlevideo = async (event, name, url) => {// 阻止浏览器默认表单事件event.preventdefault();let currentsize = document.queryselector("h2");let files = document.queryselector(name).files;// 默认切片数量const sectionlength = 100;// 首先请求接口，获取服务器是否存在此文件// count为0则是第一次上传，count不为0则服务器存在此文件，返回已上传的切片数count = await handlecancel(files[0]);// 申明存放切片的数组对象let filecurrent = [];// 循环file文件对象for (const file of [...files]) { // 得出每个切片的大小 let itemsize = math.ceil(file.size / sectionlength); // 循环文件size，文件blob存入数组 let current = 0; for (current; current < file.size; current += itemsize) { filecurrent.push({ file: file.slice(current, current + itemsize) }); } // axios模拟手动取消请求 const canceltoken = axios.canceltoken; const source = canceltoken.source(); // 当断点续传时，处理切片数量，已上传切片则不需要再次请求上传 filecurrent = count === 0 ? filecurrent : filecurrent.slice(count, sectionlength); // 循环切片请求接口 for (const [index, item] of filecurrent.entries()) { // 模拟请求暂停 || 网络断开 if (index > 90) { source.cancel("取消请求"); } // 存入文件相关信息 // file为切片blob对象 // filename为文件名 // index为当前切片数 // total为总切片数 let formdata = new formdata(); formdata.append("file", item.file); formdata.append("filename", file.name); formdata.append("total", sectionlength); formdata.append("index", index + count + 1); await axios({ url: `http://localhost:8080/${url}`, method: "post", data: formdata, canceltoken: source.token, }) .then((response) => { // 返回数据显示进度 currentsize.innerhtml = `进度${response.data.size}%`; }) .catch((err) => { console.log(err); }); }}};// 请求接口，查询上传文件是否存在// count为0表示不存在，count不为0则已上传对应切片数const handlecancel = (file) => {return axios({ method: "post", url: "http://localhost:8080/getsize", headers: { "content-type": "application/json; charset = utf-8" }, data: { filename: file.name, },}) .then((res) => { return res.data.count; }) .catch((err) => { console.log(err); });};
node服务端// 使用express构建服务器apiconst express = require("express");// 引入上传文件逻辑代码const upload = require("./upload_file");// 处理所有响应，设置跨域app.all("*", (req, res, next) => { res.header("access-control-allow-origin", "*"); res.header("access-control-allow-headers", "x-requested-with"); res.header("access-control-allow-methods", "put,post,get,delete,options"); res.header("access-control-allow-headers", "content-type, x-requested-with "); res.header("x-powered-by", " 3.2.1"); res.header("content-type", "application/json;charset=utf-8"); next();});const app = express();app.use(bodyparser.json({ type: "application/*+json" }));// 视频上传（查询当前切片数）app.post("/getsize", upload.getsize);// 视频上传接口app.post("/video", upload.video);// 开启本地端口侦听app.listen(8080);
upload_file
// 文件上传模块const formidable = require("formidable");// 文件系统模块const fs = require("fs");// 系统路径模块const path = require("path");// 操作写入文件流const handlestream = (item, writestream) => { // 读取对应目录文件buffer const readfile = fs.readfilesync(item); // 将读取的buffer || chunk写入到stream中 writestream.write(readfile); // 写入完后，清除暂存的切片文件 fs.unlink(item, () => {});};// 视频上传(切片)module.exports.video = (req, res) => { // 创建解析对象 const form = new formidable.incomingform(); // 设置视频文件上传路径 let dirpath = path.join(__dirname, "video"); form.uploaddir = dirpath; // 是否保留上传文件名后缀 form.keepextensions = true; // err 错误对象 如果解析失败包含错误信息 // fields 包含除了二进制以外的formdata的key-value对象 // file 对象类型 上传文件的信息 form.parse(req, async (err, fields, file) => { // 获取上传文件blob对象 let files = file.file; // 获取当前切片index let index = fields.index; // 获取总切片数 let total = fields.total; // 获取文件名 let filename = fields.filename; // 重写上传文件名，设置暂存目录 let url = dirpath + "/" + filename.split(".")[0] + `_${index}.` + filename.split(".")[1]; try { // 同步修改上传文件名 fs.renamesync(files.path, url); console.log(url); // 异步处理 settimeout(() => { // 判断是否是最后一个切片上传完成，拼接写入全部视频 if (index === total) { // 同步创建新目录，用以存放完整视频 let newdir = __dirname + `/uploadfiles/${date.now()}`; // 创建目录 fs.mkdirsync(newdir); // 创建可写流，用以写入文件 let writestream = fs.createwritestream(newdir + `/${filename}`); let fslist = []; // 取出所有切片文件，放入数组 for (let i = 0; i < total; i++) { const fsurl = dirpath + "/" + filename.split(".")[0] + `_${i + 1}.` + filename.split(".")[1]; fslist.push(fsurl); } // 循环切片文件数组，进行stream流的写入 for (let item of fslist) { handlestream(item, writestream); } // 全部写入，关闭stream写入流 writestream.end(); } }, 100); } catch (e) { console.log(e); } res.send({ code: 0, msg: "上传成功", size: index, }); });};// 获取文件切片数module.exports.getsize = (req, res) => { let count = 0; req.setencoding("utf8"); req.on("data", function (data) { let name = json.parse(data); let dirpath = path.join(__dirname, "video"); // 计算已上传的切片文件个数 let files = fs.readdirsync(dirpath); files.foreach((item, index) => { let url = name.filename.split(".")[0] + `_${index + 1}.` + name.filename.split(".")[1]; if (files.includes(url)) { ++count; } }); res.send({ code: 0, msg: "请继续上传", count, }); });};
逻辑分析前端首先请求上传查询文件是否第一次上传，或已存在对应的切片文件第一次上传，则切片从0开始文件已存在对应的切片，则从切片数开始请求上传循环切片数组，对每块切片文件进行上传其中使用了模拟手动暂停请求，当切片数大于90取消请求服务端接收查询文件filename，查找临时存储的文件地址，判断是否存在对应上传文件从未上传过此文件，则返回0，切片数从0开始已上传过文件，则返回对应切片数接收上传文件切片，文件存入临时存储目录通过count和total判断切片是否上传完毕上传完毕，创建文件保存目录，并创建可写流，进行写入操作提取对应临时文件放入数组，循环文件目录数组，依次读取并写入文件buffer写入完毕，关闭可写流。小结以上代码涉及到具体的业务流程会有所更改或偏差，这只是其中一种具体实现的方式。
希望这篇文章能对大家有所帮助，如果有写的不对的地方也希望指点一二。
以上代码地址：https://github.com/surprise-ling/uploadfile更多编程相关知识，请访问：编程视频！！
以上就是node.js如何实现断点续传的详细内容。