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 相关文章推荐
传递参数的标准方法(jQuery.ajax)
Nov 19 Javascript
jquery下操作HTML控件的实现代码
Jan 12 Javascript
js客户端快捷键管理类的较完整实现和应用
Jun 08 Javascript
Javascript操作cookie的函数代码
Oct 03 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
Apr 17 Javascript
通过JS判断联网类型和连接状态的实现代码
Apr 01 Javascript
javaScript中push函数用法实例分析
Jun 08 Javascript
jQuery实现的倒计时效果实例小结
Apr 16 Javascript
轻松理解JavaScript之AJAX
Mar 15 Javascript
Vue.js搭建移动端购物车界面
Jun 28 Javascript
Vue中"This dependency was not found"问题的解决方法
Jun 19 Javascript
Electron-vue脚手架改造vue项目的方法
Oct 22 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
js类后台管理菜单类-MenuSwitch
2007/09/12 Javascript
JavaScript Array扩展实现代码
2009/10/14 Javascript
jQuery 行背景颜色的交替显示(隔行变色)实现代码
2009/12/13 Javascript
jQuery实现的立体文字渐变效果
2010/05/17 Javascript
使用Js让Html中特殊字符不被转义
2013/11/05 Javascript
jQuery的text()方法用法分析
2014/12/20 Javascript
JavaScript直播评论发弹幕切图功能点集合效果代码
2016/06/26 Javascript
JS本地刷新返回上一页代码
2016/07/25 Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
2016/09/05 Javascript
Angular组件化管理实现方法分析
2017/03/17 Javascript
nodejs中模块定义实例详解
2017/03/18 NodeJs
jQuery自定义多选下拉框效果
2017/06/19 jQuery
小程序ios音频播放没声音问题的解决
2018/07/11 Javascript
详解Vue组件之作用域插槽
2018/11/22 Javascript
jQuery实现适用于移动端的跑马灯抽奖特效示例
2019/01/18 jQuery
Python实现从脚本里运行scrapy的方法
2015/04/07 Python
Python中最大最小赋值小技巧(分享)
2017/12/23 Python
浅谈django rest jwt vue 跨域问题
2018/10/26 Python
keras 多任务多loss实例
2020/06/22 Python
基于Python爬取素材网站音频文件
2020/10/21 Python
PyTorch预训练Bert模型的示例
2020/11/17 Python
Python批量删除mysql中千万级大量数据的脚本分享
2020/12/03 Python
以实惠的价格提供高品质的时尚:Newchic
2018/01/18 全球购物
美国健康和保健平台:healtop
2020/07/02 全球购物
司机检讨书
2014/02/13 职场文书
幼儿园小班植树节活动方案
2014/03/04 职场文书
报纸媒体创意广告词
2014/03/17 职场文书
一分钟演讲稿
2014/04/30 职场文书
遗嘱继承权公证书
2015/01/26 职场文书
2015年读书月活动总结
2015/03/26 职场文书
硕士学位申请报告
2015/05/15 职场文书
主持稿开场白
2015/06/01 职场文书
珍爱生命主题班会
2015/08/13 职场文书
nginx简单配置多个server的方法
2021/03/31 Servers
世界十大儿童漫画书排名,法国国宝漫画排第五,第二是轰动日本连环
2022/03/18 欧美动漫
HTML CSS 一个标签实现带动画的抖音LOGO
2022/04/26 HTML / CSS