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 相关文章推荐
FF IE兼容性的修改小结
Sep 02 Javascript
使用jQuery的ajax功能实现的RSS Reader 代码
Sep 03 Javascript
javascript之学会吝啬 精简代码
Apr 25 Javascript
jquery 滚动条事件简单实例
Jul 12 Javascript
一个奇葩的最短的 IE 版本判断JS脚本
May 28 Javascript
WEB前端设计师常用工具集锦
Dec 09 Javascript
node.js中的fs.lchown方法使用说明
Dec 16 Javascript
jquery datatable服务端分页
Aug 31 Javascript
js 数据存储和DOM编程
Feb 09 Javascript
Angular.js中处理页面闪烁的方法详解
Mar 09 Javascript
解决浏览器会自动填充密码的问题
Apr 28 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
May 21 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
php初学者写及时补给skype用户充话费的小程序
2008/11/02 PHP
PHP daddslashes 使用方法介绍
2012/10/26 PHP
php 算法之实现相对路径的实例
2017/10/17 PHP
JavaScript confirm选择判断
2008/10/18 Javascript
js 与或运算符 || && 妙用
2009/12/09 Javascript
广泛收集的jQuery拖放插件集合
2012/04/09 Javascript
jQuery+.net实现浏览更多内容(改编php版本)
2013/03/28 Javascript
Javascript脚本实现静态网页加密实例代码
2013/11/05 Javascript
鼠标滚轴控制文本框值的JS代码
2013/11/19 Javascript
FF IE浏览器修改标签透明度的方法
2014/01/27 Javascript
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
2014/12/29 Javascript
JavaScript常用本地对象小结
2016/03/28 Javascript
Javascript 5种方法实现过滤删除前后所有空格
2016/06/22 Javascript
jquery实现全选、不选、反选的两种方法
2016/09/06 Javascript
详解jQuery停止动画——stop()方法的使用
2016/12/14 Javascript
js调用设备摄像头的方法
2018/07/19 Javascript
浅谈微信小程序列表埋点曝光指南
2019/10/15 Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
2020/07/22 Javascript
基于JavaScript实现简单扫雷游戏
2021/01/02 Javascript
[01:01:24]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python进阶教程之动态类型详解
2014/08/30 Python
python实现基本进制转换的方法
2015/07/11 Python
Python使用PIL库实现验证码图片的方法
2016/03/11 Python
Python复制Word内容并使用格式设字体与大小实例代码
2018/01/22 Python
python的sorted用法详解
2019/06/25 Python
使用Keras中的ImageDataGenerator进行批次读图方式
2020/06/17 Python
keras model.fit 解决validation_spilt=num 的问题
2020/06/19 Python
Canvas制作的下雨动画的示例
2018/03/06 HTML / CSS
Pandora西班牙官方商店:PandoraShop.es
2020/10/05 全球购物
校园招聘策划书
2014/01/09 职场文书
病人家属写给医院的感谢信
2015/01/23 职场文书
社区党支部承诺书
2015/04/29 职场文书
初中英语教师个人工作总结2015
2015/07/21 职场文书
求职信:会计求职的写作技巧
2019/04/24 职场文书
门面租赁合同范文
2019/08/06 职场文书
深度学习小工程练习之垃圾分类详解
2021/04/14 Python