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


Posted in Javascript onJune 19, 2019

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

先上代码:代码仓库地址

前端

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. 依赖的文件
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 相关文章推荐
Javascript打印网页部分内容的脚本
Nov 17 Javascript
JavaScript将Table导出到Excel实现思路及代码
Mar 13 Javascript
javascript中的startWith和endWith的几种实现方法
May 07 Javascript
基于javascript制作微博发布栏效果
Apr 04 Javascript
浅谈jQuery双事件多重加载的问题
Oct 05 Javascript
在vue中使用css modules替代scroped的方法
Mar 10 Javascript
layui 设置table 行的高度方法
Aug 17 Javascript
解决vue项目使用font-awesome,build后路径的问题
Sep 01 Javascript
React 组件渲染和更新的实现代码示例
Feb 21 Javascript
jquery实现选项卡切换代码实例
May 14 jQuery
JavaScript中的null和undefined用法解析
Sep 30 Javascript
浅谈v-for 和 v-if 并用时筛选条件方法
Nov 07 Javascript
详解在Angular4中使用ng2-baidu-map的方法
Jun 19 #Javascript
了解Javascript中函数作为对象的魅力
Jun 19 #Javascript
利用vue-i18n实现多语言切换效果的方法
Jun 19 #Javascript
使用JQuery自动完成插件Auto Complete详解
Jun 18 #jQuery
使用异步controller与jQuery实现卷帘式分页
Jun 18 #jQuery
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 #jQuery
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 #jQuery
You might like
动易数据转成dedecms的php程序
2007/04/07 PHP
用PHP实现维护文件代码
2007/06/14 PHP
解析phpstorm + xdebug 远程断点调试
2013/06/20 PHP
PHP使用静态方法的几个注意事项
2014/09/16 PHP
php实现网站文件批量压缩下载功能
2015/10/28 PHP
PHP生成短网址方法汇总
2016/07/12 PHP
LAMP环境使用Composer安装Laravel的方法
2017/03/25 PHP
任意位置显示html菜单
2007/02/01 Javascript
多浏览器兼容性比较好的复制到剪贴板的js代码
2011/10/09 Javascript
jQuery实现的网页左侧在线客服效果代码
2015/10/23 Javascript
javascript中tostring()和valueof()的用法及两者的区别
2015/11/16 Javascript
javascript每日必学之条件分支
2016/02/17 Javascript
郁闷!ionic中获取ng-model绑定的值为undefined如何解决
2016/08/27 Javascript
动态加载、移除js/css文件的示例代码
2018/03/20 Javascript
微信小程序调用摄像头隐藏式拍照功能
2018/08/22 Javascript
vuejs router history 配置到iis的方法
2018/09/20 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
2019/03/15 Javascript
简述pm2常用命令集合及配置文件说明
2019/05/30 Javascript
JS数组属性去重并校验重复数据
2020/01/10 Javascript
vue动态渲染svg、添加点击事件的实现
2020/03/13 Javascript
Element MessageBox弹框的具体使用
2020/07/27 Javascript
[01:27]DOTA2电竞之夜 今夜共饮庆功酒
2014/08/02 DOTA
python根据路径导入模块的方法
2014/09/30 Python
Python3实现将文件归档到zip文件及从zip文件中读取数据的方法
2015/05/22 Python
Python函数可变参数定义及其参数传递方式实例详解
2015/05/25 Python
Eclipse中Python开发环境搭建简单教程
2016/03/23 Python
Python新手们容易犯的几个错误总结
2017/04/01 Python
Python实现去除列表中重复元素的方法小结【4种方法】
2018/04/27 Python
Python使用到第三方库PyMuPDF图片与pdf相互转换
2019/05/03 Python
python 创建一维的0向量实例
2019/12/02 Python
Django app配置多个数据库代码实例
2019/12/17 Python
英国排名第一的礼品体验公司:Red Letter Days
2018/08/16 全球购物
法国最大的在线眼镜店:EasyLunettes
2019/08/26 全球购物
水利专业大学生职业生涯规划书范文
2014/09/17 职场文书
国家税务局干部作风整顿整改措施
2014/09/18 职场文书
入党函调证明材料
2014/12/24 职场文书