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 相关文章推荐
常用js脚本
Dec 03 Javascript
json格式化/压缩工具 Chrome插件扩展版
May 25 Javascript
基于javascript 闭包基础分享
Jul 10 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
Sep 27 Javascript
Jquery zTree 树控件异步加载操作
Feb 25 Javascript
jQuery实现的倒计时效果实例小结
Apr 16 Javascript
jQuery设置聚焦并使光标位置在文字最后的实现方法
Aug 02 Javascript
Javascript 制作图形验证码实例详解
Dec 22 Javascript
微信小程序实现图片预加载组件
Jan 18 Javascript
10个最优秀的Node.js MVC框架
Aug 24 Javascript
vue.js数据绑定操作详解
Apr 23 Javascript
解决vue动态为数据添加新属性遇到的问题
Sep 18 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 和 MYSQL
2006/10/09 PHP
基于php缓存的详解
2013/05/15 PHP
php操作mysql数据库的基本类代码
2014/02/25 PHP
php preg_match的匹配不同国家语言实例
2016/12/29 PHP
Thinkphp实现站点静态化的方法详解
2017/03/21 PHP
jQuery 可以拖动的div实现代码 脚本之家修正版
2009/06/26 Javascript
jquery显示隐藏input对象
2014/07/21 Javascript
Javascript实现字数统计
2015/07/03 Javascript
jQuery无刷新分页完整实例代码
2015/10/27 Javascript
针对BootStrap中tabs控件的美化和完善(推荐)
2016/07/06 Javascript
AngularJS实现给动态生成的元素绑定事件的方法
2016/12/14 Javascript
JavaScript实现汉字转换为拼音的库文件示例
2016/12/22 Javascript
jquery实现手机端单店铺购物车结算删除功能
2017/02/22 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
2017/06/15 Javascript
使用JavaScrip模拟实现仿京东搜索框功能
2019/10/16 Javascript
多个Vue项目部署到服务器的步骤记录
2020/10/22 Javascript
详解python单例模式与metaclass
2016/01/15 Python
玩转python selenium鼠标键盘操作(ActionChains)
2020/04/12 Python
Python中使用haystack实现django全文检索搜索引擎功能
2017/08/26 Python
python+pillow绘制矩阵盖尔圆简单实例
2018/01/16 Python
python 删除列表里所有空格项的方法总结
2018/04/18 Python
Django+JS 实现点击头像即可更改头像的方法示例
2018/12/26 Python
Python3内置模块random随机方法小结
2019/07/13 Python
Python如何基于rsa模块实现非对称加密与解密
2020/01/03 Python
Django def clean()函数对表单中的数据进行验证操作
2020/07/09 Python
Python 如何创建一个简单的REST接口
2020/07/30 Python
canvas 基础之图像处理的使用
2020/04/10 HTML / CSS
美国在线奢侈品寄售商店:Luxury Garage Sale
2018/08/19 全球购物
牵手50台湾:专为黄金岁月的单身人士而设的交友网站
2021/02/18 全球购物
工程部主管岗位职责
2015/02/12 职场文书
闪闪红星观后感
2015/06/08 职场文书
民政局未婚证明
2015/06/15 职场文书
如何书写公司员工保密协议?
2019/06/27 职场文书
致毕业季:你如何做好自己的职业生涯规划书?
2019/07/01 职场文书
关于python爬虫应用urllib库作用分析
2021/09/04 Python
分析MySQL优化 index merge 后引起的死锁
2022/04/19 MySQL