Node.js上传文件功能之服务端如何获取文件上传进度


Posted in Javascript onFebruary 05, 2018

内容概述

multer是常用的Express文件上传中间件。服务端如何获取文件上传的进度,是使用的过程中,很常见的一个问题。在SF上也有同学问了类似问题《nodejs multer有没有查看文件上传进度的方法?》。稍微回答了下,这里顺便整理出来,有同样疑问的同学可以参考。

下文主要介绍如何利用progress-stream获取文件上传进度,以及该组件使用过程中的注意事项。

利用progress-stream获取文件上传进度

如果只是想在服务端获取上传进度,可以试下如下代码。注意,这个模块跟Express、multer并不是强绑定关系,可以独立使用。

var fs = require('fs');
var express = require('express');
var multer = require('multer');
var progressStream = require('progress-stream');
var app = express();
var upload = multer({ dest: 'upload/' });
app.post('/upload', function (req, res, next) {
  // 创建progress stream的实例
  var progress = progressStream({length: '0'}); // 注意这里 length 设置为 '0'
  req.pipe(progress);
  progress.headers = req.headers;
  // 获取上传文件的真实长度(针对 multipart)
  progress.on('length', function nowIKnowMyLength (actualLength) {
    console.log('actualLength: %s', actualLength);
    progress.setLength(actualLength);
  });
  // 获取上传进度
  progress.on('progress', function (obj) {    
    console.log('progress: %s', obj.percentage);
  });
  // 实际上传文件
  upload.single('logo')(progress, res, next);
});
app.post('/upload', function (req, res, next) {
  res.send({ret_code: '0'});
});
app.get('/form', function(req, res, next){
  var form = fs.readFileSync('./form.html', {encoding: 'utf8'});
  res.send(form);
});
app.listen(3000);

如何获取上传文件的真实大小

multipart类型,需要监听length来获取文件真实大小。(官方文档里是通过conviction事件,其实是有问题的)

// 获取上传文件的真实长度(针对 multipart)
progress.on('length', function nowIKnowMyLength (actualLength) {
  console.log('actualLength: %s', actualLength);
  progress.setLength(actualLength);
});

3、关于progress-stream获取真实文件大小的bug?

针对multipart文件上传,progress-stream 实例子初始化时,参数length需要传递非数值类型,不然你获取到的进度要一直是0,最后就直接跳到100。

至于为什么会这样,应该是 progress-steram 模块的bug,看下模块的源码。当length是number类型时,代码直接跳过,因此你length一直被认为是0。

tr.on('pipe', function(stream) {
  if (typeof length === 'number') return;
  // Support http module
  if (stream.readable && !stream.writable && stream.headers) {
    return onlength(parseInt(stream.headers['content-length'] || 0));
  }
  // Support streams with a length property
  if (typeof stream.length === 'number') {
    return onlength(stream.length);
  }
  // Support request module
  stream.on('response', function(res) {
    if (!res || !res.headers) return;
    if (res.headers['content-encoding'] === 'gzip') return;
    if (res.headers['content-length']) {
      return onlength(parseInt(res.headers['content-length']));
    }
  });
});

总结

以上所述是小编给大家介绍的Node.js上传文件功能之服务端如何获取文件上传进度,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
ExtJs grid行 右键菜单的两种方法
Jun 19 Javascript
Javascript面象对象成员、共享成员变量实验
Nov 19 Javascript
JS将秒换成时分秒实现代码
Sep 03 Javascript
简单的JavaScript互斥锁分享
Feb 02 Javascript
详解AngularJS 路由 resolve用法
Apr 24 Javascript
深入理解Node.js中通用基础设计模式
Sep 19 Javascript
javascript性能优化之分时函数的介绍
Mar 28 Javascript
Vue.js实现表格渲染的方法
Sep 07 Javascript
Angular7创建项目、组件、服务以及服务的使用
Feb 19 Javascript
vue 实现 rem 布局或vw 布局的方法
Nov 13 Javascript
Vue的全局过滤器和私有过滤器的实现
Apr 20 Javascript
Node.js实现断点续传
Jun 23 Javascript
javascript实现最长公共子序列实例代码
Feb 05 #Javascript
JS设计模式之访问者模式定义与用法分析
Feb 05 #Javascript
基于vue 动态加载图片src的解决方法
Feb 05 #Javascript
vue2.0 datepicker使用方法
Feb 04 #Javascript
js数组常用最重要的方法
Feb 04 #Javascript
jQuery Dom元素操作技巧
Feb 04 #jQuery
Vue的事件响应式进度条组件实例详解
Feb 04 #Javascript
You might like
对Session和Cookie的区分与解释
2007/03/16 PHP
执行、获取远程代码返回:file_get_contents 超时处理的问题详解
2013/06/25 PHP
Sublime里直接运行PHP配置方法
2014/11/28 PHP
PHP代码实现表单数据验证类
2015/07/28 PHP
遍历echsop的region表形成缓存的程序实例代码
2016/11/01 PHP
Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试
2012/02/13 Javascript
jQuery的context属性用法实例
2014/12/27 Javascript
javascript实现日期按月份加减
2015/05/15 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
2015/11/24 Javascript
JQuery遍历元素的父辈和祖先的方法
2016/09/18 Javascript
js仿搜狐视频记录片列表展示效果
2020/05/30 Javascript
jquery对象与DOM对象转化
2017/02/08 Javascript
vue.js使用3DES加密的方法示例
2018/05/18 Javascript
layer.close()关闭进度条和Iframe窗的方法
2018/08/17 Javascript
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
2019/09/23 Javascript
vue 强制组件重新渲染(重置)的两种方案
2019/10/29 Javascript
解决vue-cli项目开发运行时内存暴涨卡死电脑问题
2019/10/29 Javascript
基于Python __dict__与dir()的区别详解
2017/10/30 Python
Django框架会话技术实例分析【Cookie与Session】
2019/05/24 Python
分享一枚pycharm激活码适用所有pycharm版本我的pycharm2020.2.3激活成功
2020/11/20 Python
python RSA加密的示例
2020/12/09 Python
解释下面关于J2EE的名词
2013/11/15 面试题
生产车间实习自我鉴定
2013/09/23 职场文书
自动一体化专业求职信
2014/03/15 职场文书
幼儿园中班教师寄语
2014/04/03 职场文书
身边的榜样活动方案
2014/08/20 职场文书
安全例会汇报材料
2014/08/23 职场文书
委托函范文
2015/01/29 职场文书
悬崖上的金鱼姬观后感
2015/06/15 职场文书
python 用递归实现通用爬虫解析器
2021/04/16 Python
Python 高级库15 个让新手爱不释手(推荐)
2021/05/15 Python
SpringBoot工程下使用OpenFeign的坑及解决
2021/07/02 Java/Android
一次MySQL启动导致的事故实战记录
2021/09/15 MySQL
redis复制有可能碰到的问题汇总
2022/04/03 Redis
mysql查询结果实现多列拼接查询
2022/04/03 MySQL
Python Matplotlib绘制等高线图与渐变色扇形图
2022/04/14 Python