基于Node.js的大文件分片上传示例

前端  /  管理员 发布于 5年前   414

我们在做文件上传的时候，如果文件过大，可能会导致请求超时的情况。所以，在遇到需要对大文件进行上传的时候，就需要对文件进行分片上传的操作。同时如果文件过大，在网络不佳的情况下，如何做到断点续传？也是需要记录当前上传文件，然后在下一次进行上传请求的时候去做判断。

先上代码：代码仓库地址

前端

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

其中细节部分代码里有相应的注释说明，浏览代码就一目了然。

后续延伸：断点续传、多文件多批次上传

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

您可能感兴趣的文章:

• javascript之分片上传，断点续传的实际项目实现详解