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 相关文章推荐
javascript判断两个IP地址是否在同一个网段的实现思路
Dec 13 Javascript
一个检测表单数据的JavaScript实例
Oct 31 Javascript
再分享70+免费的jquery 图片滑块效果插件和教程
Dec 15 Javascript
原生js制作简单的数字键盘
Apr 24 Javascript
D3.js实现柱状图的方法详解
Sep 21 Javascript
JavaScript你不知道的一些数组方法
Aug 18 Javascript
基于ajax和jsonp的原生封装(实例)
Oct 16 Javascript
Vue中使用Sortable的示例代码
Apr 07 Javascript
微信小程序上线发布流程图文详解
May 06 Javascript
javascript设计模式之迭代器模式
Jan 30 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
Sep 04 Javascript
js实现简易ATM功能
Oct 27 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
nginx+php-fpm配置文件的组织结构介绍
2012/11/07 PHP
PHP实现加密的几种方式介绍
2015/02/22 PHP
[原创]来自ImageSee官方 JavaScript图片浏览器
2008/01/16 Javascript
javascript 尚未实现错误解决办法
2008/11/27 Javascript
jQuery 1.3 和 Validation 验证插件1.5.1
2009/07/09 Javascript
jQuery 使用手册(六)
2009/09/23 Javascript
Javascript select下拉框操作常用方法
2009/11/09 Javascript
13个绚丽的Jquery 界面设计网站推荐
2010/09/28 Javascript
ff chrome和ie下全局动态定位的异同及全局高度的取法
2014/06/30 Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
2014/12/12 Javascript
javascript实现支持移动设备画廊
2015/08/24 Javascript
关于Sequelize连接查询时inlude中model和association的区别详解
2017/02/27 Javascript
常见的浏览器Hack技巧整理
2017/06/29 Javascript
基于Bootstrap表单验证功能
2017/11/17 Javascript
基于node.js实现微信支付退款功能
2017/12/19 Javascript
使用vue-router设置每个页面的title方法
2018/02/11 Javascript
安装vue-cli的简易过程
2018/05/22 Javascript
AngularJS实现的自定义过滤器简单示例
2019/02/02 Javascript
Django应用程序中如何发送电子邮件详解
2017/02/04 Python
浅谈Python2.6和Python3.0中八进制数字表示的区别
2017/04/28 Python
python中的turtle库函数简单使用教程
2018/07/23 Python
学Python 3的理由和必要性
2019/11/19 Python
Python实现word2Vec model过程解析
2019/12/16 Python
Python递归函数特点及原理解析
2020/03/04 Python
Python 3.8 新功能来一波(大部分人都不知道)
2020/03/11 Python
python实现人性化显示金额数字实例详解
2020/09/25 Python
CSS3实现跳动的动画效果
2016/09/12 HTML / CSS
CSS3盒子模型详解
2013/04/24 HTML / CSS
移动端HTML5 input常见问题(小结)
2020/09/28 HTML / CSS
机关党员2014全国两会学习心得体会
2014/03/10 职场文书
家长会主持词
2014/03/26 职场文书
艺术节主持词
2014/04/02 职场文书
服务标兵事迹材料
2014/05/04 职场文书
推广普通话演讲稿
2014/05/23 职场文书
项目合作意向书模板
2014/07/29 职场文书
干部作风建设心得体会
2014/10/22 职场文书