基于Node.js的大文件分片上传示例
程序员文章站
2022-09-07 10:50:32
我们在做文件上传的时候,如果文件过大,可能会导致请求超时的情况。所以,在遇到需要对大文件进行上传的时候,就需要对文件进行分片上传的操作。同时如果文件过大,在网络不佳的情况下...
我们在做文件上传的时候,如果文件过大,可能会导致请求超时的情况。所以,在遇到需要对大文件进行上传的时候,就需要对文件进行分片上传的操作。同时如果文件过大,在网络不佳的情况下,如何做到断点续传?也是需要记录当前上传文件,然后在下一次进行上传请求的时候去做判断。
先上代码:
前端
1. index.html
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>文件上传</title> <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script> <script src="https://code.jquery.com/jquery-3.4.1.js"></script> <script src="./spark-md5.min.js"></script> <script> $(document).ready(() => { const chunksize = 1 * 1024 * 1024; // 每个chunk的大小,设置为1兆 // 使用blob.slice方法来对文件进行分割。 // 同时该方法在不同的浏览器使用方式不同。 const blobslice = file.prototype.slice || file.prototype.mozslice || file.prototype.webkitslice; const hashfile = (file) => { return new promise((resolve, reject) => { const chunks = math.ceil(file.size / chunksize); let currentchunk = 0; const spark = new sparkmd5.arraybuffer(); const filereader = new filereader(); function loadnext() { const start = currentchunk * chunksize; const end = start + chunksize >= file.size ? file.size : start + chunksize; filereader.readasarraybuffer(blobslice.call(file, start, end)); } filereader.onload = e => { spark.append(e.target.result); // append array buffer currentchunk += 1; if (currentchunk < chunks) { loadnext(); } else { console.log('finished loading'); const result = spark.end(); // 如果单纯的使用result 作为hash值的时候, 如果文件内容相同,而名称不同的时候 // 想保留两个文件无法保留。所以把文件名称加上。 const sparkmd5 = new sparkmd5(); sparkmd5.append(result); sparkmd5.append(file.name); const hexhash = sparkmd5.end(); resolve(hexhash); } }; filereader.onerror = () => { console.warn('文件读取失败!'); }; loadnext(); }).catch(err => { console.log(err); }); } const submitbtn = $('#submitbtn'); submitbtn.on('click', async () => { const filedom = $('#file')[0]; // 获取到的files为一个file对象数组,如果允许多选的时候,文件为多个 const files = filedom.files; const file = files[0]; if (!file) { alert('没有获取文件'); return; } const blockcount = math.ceil(file.size / chunksize); // 分片总数 const axiospromisearray = []; // axiospromise数组 const hash = await hashfile(file); //文件 hash // 获取文件hash之后,如果需要做断点续传,可以根据hash值去后台进行校验。 // 看看是否已经上传过该文件,并且是否已经传送完成以及已经上传的切片。 console.log(hash); for (let i = 0; i < blockcount; i++) { const start = i * chunksize; const end = math.min(file.size, start + chunksize); // 构建表单 const form = new formdata(); form.append('file', blobslice.call(file, start, end)); form.append('name', file.name); form.append('total', blockcount); form.append('index', i); form.append('size', file.size); form.append('hash', hash); // ajax提交 分片,此时 content-type 为 multipart/form-data const axiosoptions = { onuploadprogress: e => { // 处理上传的进度 console.log(blockcount, i, e, file); }, }; // 加入到 promise 数组中 axiospromisearray.push(axios.post('/file/upload', form, axiosoptions)); } // 所有分片上传后,请求合并分片文件 await axios.all(axiospromisearray).then(() => { // 合并chunks const data = { size: file.size, name: file.name, total: blockcount, hash }; axios .post('/file/merge_chunks', data) .then(res => { console.log('上传成功'); console.log(res.data, file); alert('上传成功'); }) .catch(err => { console.log(err); }); }); }); }) window.onload = () => { } </script> </head> <body> <h1>大文件上传测试</h1> <section> <h3>自定义上传文件</h3> <input id="file" type="file" name="avatar"/> <div> <input id="submitbtn" type="button" value="提交"> </div> </section> </body> </html>
2. 依赖的文件
后端
1. app.js
const koa = require('koa'); const app = new koa(); const router = require('koa-router'); const multer = require('koa-multer'); const serve = require('koa-static'); const path = require('path'); const fs = require('fs-extra'); const koabody = require('koa-body'); const { mkdirssync } = require('./utils/dir'); const uploadpath = path.join(__dirname, 'uploads'); const uploadtemppath = path.join(uploadpath, 'temp'); const upload = multer({ dest: uploadtemppath }); const router = new router(); app.use(koabody()); /** * single(fieldname) * accept a single file with the name fieldname. the single file will be stored in req.file. */ router.post('/file/upload', upload.single('file'), async (ctx, next) => { console.log('file upload...') // 根据文件hash创建文件夹,把默认上传的文件移动当前hash文件夹下。方便后续文件合并。 const { name, total, index, size, hash } = ctx.req.body; const chunkspath = path.join(uploadpath, hash, '/'); if(!fs.existssync(chunkspath)) mkdirssync(chunkspath); fs.renamesync(ctx.req.file.path, chunkspath + hash + '-' + index); ctx.status = 200; ctx.res.end('success'); }) router.post('/file/merge_chunks', async (ctx, next) => { const { size, name, total, hash } = ctx.request.body; // 根据hash值,获取分片文件。 // 创建存储文件 // 合并 const chunkspath = path.join(uploadpath, hash, '/'); const filepath = path.join(uploadpath, name); // 读取所有的chunks 文件名存放在数组中 const chunks = fs.readdirsync(chunkspath); // 创建存储文件 fs.writefilesync(filepath, ''); if(chunks.length !== total || chunks.length === 0) { ctx.status = 200; ctx.res.end('切片文件数量不符合'); return; } for (let i = 0; i < total; i++) { // 追加写入到文件中 fs.appendfilesync(filepath, fs.readfilesync(chunkspath + hash + '-' +i)); // 删除本次使用的chunk fs.unlinksync(chunkspath + hash + '-' +i); } fs.rmdirsync(chunkspath); // 文件合并成功,可以把文件信息进行入库。 ctx.status = 200; ctx.res.end('合并成功'); }) app.use(router.routes()); app.use(router.allowedmethods()); app.use(serve(__dirname + '/static')); app.listen(9000);
2. utils/dir.js
const path = require('path'); const fs = require('fs-extra'); const mkdirssync = (dirname) => { if(fs.existssync(dirname)) { return true; } else { if (mkdirssync(path.dirname(dirname))) { fs.mkdirsync(dirname); return true; } } } module.exports = { mkdirssync };
操作步骤说明
服务端的搭建
我们以下的操作都是保证在已经安装node以及npm的前提下进行。node的安装以及使用可以参考官方网站。
1、新建项目文件夹file-upload
2、使用npm初始化一个项目:cd file-upload && npm init
3、安装相关依赖
npm i koa npm i koa-router --save // koa路由 npm i koa-multer --save // 文件上传处理模块 npm i koa-static --save // koa静态资源处理模块 npm i fs-extra --save // 文件处理 npm i koa-body --save // 请求参数解析
4、创建项目结构
file-upload - static - index.html - spark-md5.min.js - uploads - temp - utils - dir.js - app.js
5、复制相应的代码到指定位置即可
6、项目启动:node app.js (可以使用 nodemon 来对服务进行管理)
7、访问:http://localhost:9000/index.html
其中细节部分代码里有相应的注释说明,浏览代码就一目了然。
后续延伸:断点续传、多文件多批次上传
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇: 每天喝红糖姜水好吗,红糖姜水怎么做
推荐阅读
-
iOS大文件的分片上传和断点上传的实现代码
-
Golang+Android基于HttpURLConnection实现的文件上传功能示例
-
PHP大文件分片上传的实现方法
-
基于vue-upload-component封装一个图片上传组件的示例
-
PHP大文件分片上传的实现方法
-
Node.js实现文件上传的示例
-
Node.js + express实现上传大文件的方法分析【图片、文本文件】
-
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
-
30分钟玩转Net MVC 基于WebUploader的大文件分片上传、断网续传、秒传(文末附带demo下载)
-
基于Node.js的大文件分片上传示例