欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-04-28 20:59:28
我们在做文件上传的时候，如果文件过大，可能会导致请求超时的情况。所以，在遇到需要对大文件进行上传的时候，就需要对文件进行分片上传的操作。同时如果文件过大，在网络不佳的情况下...

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

先上代码：

前端

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

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

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

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

上一篇： AngularJS 实现按需异步加载实例代码

下一篇： PhotoShop(PS)制作个性可爱的具有十字绣效果的圣诞老人圣诞节贺卡教程

推荐阅读