使用Node.js怎么实现一个大文件分片上传功能
使用Node.js怎么实现一个大文件分片上传功能?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
成都创新互联专注于蔡家坡企业网站建设,成都响应式网站建设公司,电子商务商城网站建设。蔡家坡网站建设公司,为蔡家坡等地区提供建站服务。全流程按需开发网站,专业设计,全程项目跟踪,成都创新互联专业和态度为您提供的服务
前端
1. index.html
文件上传 大文件上传测试
自定义上传文件
2. 依赖的文件
axios.js
jquery
spark-md5.js
后端
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
看完上述内容,你们掌握使用Node.js怎么实现一个大文件分片上传功能的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联行业资讯频道,感谢各位的阅读!
分享标题:使用Node.js怎么实现一个大文件分片上传功能
浏览地址:http://pwwzsj.com/article/ishgji.html